diff --git a/api/js/etemplate/Et2Taglist/Et2Taglist.ts b/api/js/etemplate/Et2Taglist/Et2Taglist.ts index 36c13ed271..7a32036389 100644 --- a/api/js/etemplate/Et2Taglist/Et2Taglist.ts +++ b/api/js/etemplate/Et2Taglist/Et2Taglist.ts @@ -121,6 +121,9 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox) if (this._inputNode.value == _value) { this.set_value(this.getValue().concat([this._inputNode.value])); + // reset the entered value otherwise to clean up the inputbox after + // new entry has been set as new value and option. + this._inputNode.value = ''; } this.removeEventListener('form-element-register', modelValueChanged); }; @@ -128,6 +131,30 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox) } + + /** + * @override of _listboxOnKeyDown + * @desc + * Handle various keyboard controls; UP/DOWN will shift focus; SPACE selects + * an item. + * + * @param {KeyboardEvent} ev - the keydown event object + * @protected + */ + _listboxOnKeyDown(ev) { + const { key } = ev; + + // make sure we don't mess up with activeIndex after a free entry gets added into options + // it's very important to intercept the key down handler before the listbox (parent) happens. + if (key === 'Enter' && this.allowFreeEntries && this._inputNode.value + && !this.formElements.filter(_o=>{return _o.choiceValue == this._inputNode.value;}).length) + { + this.activeIndex = -1; + } + + super._listboxOnKeyDown(ev); + } + /** * @param {string} v * @protected diff --git a/api/js/etemplate/Et2Taglist/TaglistSelection.ts b/api/js/etemplate/Et2Taglist/TaglistSelection.ts index 73bfcb4a1b..83cfc5ff8a 100644 --- a/api/js/etemplate/Et2Taglist/TaglistSelection.ts +++ b/api/js/etemplate/Et2Taglist/TaglistSelection.ts @@ -18,6 +18,11 @@ import {taglistStyles} from "./TaglistStyles"; * Implementation of selection tags */ export class TaglistSelection extends LitElement { + /** + * keeps last backspace status + */ + protected _removeOnBackspace = false; + static get properties() { return { comboxElement: {type: Object}, @@ -209,16 +214,24 @@ export class TaglistSelection extends LitElement { * @param ev */ __inputOnKeyup(ev) { - if (ev.key === 'Backspace') { - if (!this._inputNode.value && this._canBeClosed()) { - if (this.__getSelectedTags().length) { - this.__getSelectedTags()[this.__getSelectedTags().length - 1].checked = false; + + const { key } = ev; + switch(key) + { + case 'Backspace': + if (!this._inputNode.value && this._canBeClosed()) { + if (this.__getSelectedTags().length && this._removeOnBackspace) { + this.__getSelectedTags()[this.__getSelectedTags().length - 1].checked = false; + } + this._removeOnBackspace = true; } - } + else + { + this._removeOnBackspace = false; + } + break; } - //todo: setting a new option value changes option indexes therefore the last activeIndex should be adopted according - // to our new options' indexes. We need to figure out how to set that index before the last selected option gets unchecked. - this._getComboBoxElement().activeIndex = this.__getSelectedTags().length; + if (key !== 'Backspace') this._removeOnBackspace = false; } } customElements.define('taglist-selection', TaglistSelection);