From d13d0393491e103d638c7dd49df284b3250a82df Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Wed, 23 Mar 2022 18:16:19 +0100
Subject: [PATCH] Fix Taglist new free entry replacing other selected options

---
 api/js/etemplate/Et2Taglist/Et2Taglist.ts     | 27 +++++++++++++++++
 .../etemplate/Et2Taglist/TaglistSelection.ts  | 29 ++++++++++++++-----
 2 files changed, 48 insertions(+), 8 deletions(-)

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);