extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-06-21 02:18:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix Taglist new free entry replacing other selected options

Browse Source
This commit is contained in:
Hadi Nategh 2022-03-23 18:16:19 +01:00
parent f5c1e21ee8
commit d13d039349
2 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
api/js/etemplate/Et2Taglist/Et2Taglist.ts
View File

@ -121,6 +121,9 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
if (this._inputNode.value == _value) if (this._inputNode.value == _value)
{ {
this.set_value(this.getValue().concat([this._inputNode.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); 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 * @param {string} v
* @protected * @protected

29
api/js/etemplate/Et2Taglist/TaglistSelection.ts
View File

@ -18,6 +18,11 @@ import {taglistStyles} from "./TaglistStyles";
* Implementation of selection tags * Implementation of selection tags
*/ */
export class TaglistSelection extends LitElement { export class TaglistSelection extends LitElement {
/**
* keeps last backspace status
*/
protected _removeOnBackspace = false;
static get properties() { static get properties() {
return { return {
comboxElement: {type: Object}, comboxElement: {type: Object},
@ -209,16 +214,24 @@ export class TaglistSelection extends LitElement {
* @param ev * @param ev
*/ */
__inputOnKeyup(ev) { __inputOnKeyup(ev) {
if (ev.key === 'Backspace') {
if (!this._inputNode.value && this._canBeClosed()) { const { key } = ev;
if (this.__getSelectedTags().length) { switch(key)
this.__getSelectedTags()[this.__getSelectedTags().length - 1].checked = false; {
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 if (key !== 'Backspace') this._removeOnBackspace = false;
// 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;
} }
} }
customElements.define('taglist-selection', TaglistSelection); customElements.define('taglist-selection', TaglistSelection);