Da

✏️ Editing: editable-select-element.phtml

<?php
// Copyright 1999-2025. WebPros International GmbH. All rights reserved.

$defaultText = ' (' . $this->defaultText . ')';
$ariaLabel = $this->lmsg('components.elements.editable-select.input-ariaLabel');

?>
<div class='form-row'>
    <div class='field-name'>
        <?php echo $this->element->getLabel(); ?>
    </div>
    <div class='field-value'>
        <div class='combobox'>
            <input
                    type='text' class='combobox-input input-text <?php if ($this->element->getAttrib('isLongLength')): ?>f-big-size<?php endif; ?>'
                    <?php echo $this->element->getAttrib('disabled'); ?>
                    value='<?php echo $this->value; ?>'
                    id='<?php echo $this->element->getId(); ?>'
                    aria-label="<?= $ariaLabel ?>">
            <?php echo $this->defaultElementContent; ?>
            <?php echo $this->realElementContent; ?>
            <?php echo $this->options; ?>
            <input type='hidden' value='<?= $defaultText ?>' id='<?= $this->element->getId() ?>-default-text'/>
        </div>
        <?php echo $this->restoreToDefaultElementContent; ?>
        <?php echo $this->description; ?>
        <span class='field-errors'></span>
    </div>

</div>
<script type='text/javascript'>
//<![CDATA[
(function () {
    var mainElement = document.getElementById(<?php echo $this->jsEscape($this->element->getId()); ?>);
    var defaultElement = document.getElementById(mainElement.id + '-default');
    var resetElement = document.getElementById(mainElement.id + '-reset-to-default');
    var realValueElement = document.getElementById(mainElement.id + '-real');
    var defaultText = '<?=$defaultText?>';

if (!mainElement || !defaultElement || !resetElement || !realValueElement) {
        return;
    }

var cleanupTextValue = function () {
        if (-1 < this.value.indexOf(defaultText)) {
            this.value = this.value.replace(defaultText, '');
        }
    };

var tempValue = mainElement.value.replace(defaultText, '');
    if (tempValue === defaultElement.value) {
        resetElement.style.display = 'none';
    }

resetElement.addEventListener('click', function (event) {
        event.preventDefault();
        if (mainElement.disabled) {
            return;
        }
        mainElement.value = defaultElement.value;
        realValueElement.value = defaultElement.value;
        if (mainElement.value == defaultElement.value && '' != defaultElement.value) {
            mainElement.value = mainElement.value + defaultText;
        }
        resetElement.style.display = 'none';
    });

mainElement.addEventListener('change', function (event) {
        realValueElement.value = this.value;
        cleanupTextValue.apply(realValueElement);
        if (realValueElement.value === defaultElement.value) {
            resetElement.style.display = 'none';
        } else {
            resetElement.style.display = '';
        }
    });

var editableSelectButton = document.getElementById(mainElement.id + '-button');
    if (editableSelectButton) {
        var optionList = editableSelectButton.parentNode.nextElementSibling;
        optionList.querySelectorAll('li').forEach(function (item) {
            item.addEventListener('mousedown', function (event) {
                var comboBox = this.parentNode.parentNode;
                comboBox.classList.toggle('combobox-open');
                realValueElement.value = this.dataset.value;
                mainElement.value = realValueElement.value;
            });
        });

editableSelectButton.addEventListener('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            if (mainElement.disabled) {
                return;
            }
            var combobox = this.parentNode.parentNode;
            document.querySelectorAll('.combobox').forEach(function (item) {
                if (combobox === item) {
                    combobox.classList.toggle('combobox-open');
                    mainElement.focus();
                } else {
                    item.classList.remove('combobox-open');
                }
            });
        });
    }

mainElement.addEventListener('focusin', cleanupTextValue);
    mainElement.addEventListener('focus', cleanupTextValue);

mainElement.addEventListener('blur', function (event){
        if (editableSelectButton) {
            optionList.parentNode.classList.remove('combobox-open');

}
        if (this.value === defaultElement.value) {
            this.value = this.value + defaultText;
            resetElement.style.display = 'none';
        } else if (this.value != defaultElement.value + defaultText) {
            resetElement.style.display = '';
        }
    });
})();
//]]>
</script>

📁 Sid Gifari File Manager