File Content: editable-select-element.phtml <?php // Copyright 1999-2025. WebPros International GmbH. All rights reserved. $defaultText = ' (' . $this->defaultText . ')'; ?> <div class='form-row'> <div class='field-name'> <?php echo $this->element->getLabel(); ?> </div> <div class='field-value'> <div class='combobox'><!-- + combobox-open + dropup --> <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(); ?>'> <?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> Submit