Fix editable tags failed their tests

editable was not passed to tag, edit mode broke

api/js/etemplate/Et2InputWidget/Et2InputWidget.ts

@@ -6,6 +6,7 @@ import {ManualMessage} from "../Validators/ManualMessage";
 import {LionValidationFeedback, Validator} from "@lion/form-core";
 import {et2_csvSplit} from "../et2_core_common";
 import {dedupeMixin} from "@lion/core";
+import {property} from "lit/decorators/property.js";
 
 // LionValidationFeedback needs to be registered manually
 window.customElements.define('lion-validation-feedback', LionValidationFeedback);
@@ -53,6 +54,7 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
 	class Et2InputWidgetClass extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode, et2_ISubmitListener
 	{
 		private __readonly : boolean;
+		private __label : string = "";
 		protected _oldValue : string | number | Object;
 		protected node : HTMLElement;
 
@@ -186,7 +188,7 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
 			this.defaultValidators = [];
 			this._messagesHeldWhileFocused = [];
 
-			this.__readonly = false;
+			this.readonly = false;
 			this._oldValue = this.getValue();
 
 			this.isSlComponent = typeof (<any>this).handleChange === 'function';
@@ -390,12 +392,14 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
 		}
 
 		/**
+		 * The label of the widget
 		 * Legacy support for labels with %s that get wrapped around the widget
 		 *
 		 * Not the best way go with webComponents - shouldn't modify their DOM like this
 		 *
 		 * @param new_label
 		 */
+		@property()
 		set label(new_label : string)
 		{
 			if(!new_label || !new_label.includes("%s"))

api/js/etemplate/Et2Select/Et2Select.ts

@@ -967,7 +967,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
                     size=${this.size || "medium"}
                     ?removable=${!readonly}
                     ?readonly=${readonly}
-                    ?editable=${isEditable}
+                    .editable=${isEditable}
                     .value=${option.value.replaceAll("___", " ")}
                     @change=${this.handleTagEdit}
                     @dblclick=${this._handleDoubleClick}

api/js/etemplate/Et2Select/Tag/Et2Tag.ts

@@ -12,6 +12,8 @@ import {css, html, TemplateResult} from "lit";
 import {classMap} from "lit/directives/class-map.js";
 import shoelace from "../../Styles/shoelace";
 import {state} from "lit/decorators/state.js";
+import {property} from "lit/decorators/property.js";
+import {Et2Textbox} from "../../Et2Textbox/Et2Textbox";
 
 /**
  * Tag is usually used in a Select with multiple=true, but there's no reason it can't go anywhere
@@ -69,23 +71,16 @@ export class Et2Tag extends Et2Widget(SlTag)
 			`];
 	}
 
-	static get properties()
+	@property({type: Boolean}) editable = false;
-	{
+	@property({type: String, reflect: true}) value = "";
-		return {
-			...super.properties,
-			editable: {type: Boolean, reflect: true},
-			value: {type: String, reflect: true}
-		}
-	}
 
 	@state() current = false; // the user has keyed into the tag (focused), but hasn't done anything yet (shows a highlight)
+	@state() isEditing = false;
 
 	constructor(...args : [])
 	{
 		super(...args);
-		this.value = "";
 		this.pill = false;
-		this.editable = false;
 		this.removable = true;
 
 		this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -203,8 +198,9 @@ export class Et2Tag extends Et2Widget(SlTag)
 		this.setAttribute("contenteditable", "true");
 
 		this.requestUpdate();
-		this.updateComplete.then(() =>
+		this.updateComplete.then(async() =>
 		{
+			await this._editNode.updateComplete;
 			// This stops drag and drop from interfereing with mouse edits
 			this._editNode.input.setAttribute("contenteditable", "true");
 
@@ -233,7 +229,7 @@ export class Et2Tag extends Et2Widget(SlTag)
 		})
 	}
 
-	get _editNode() : HTMLInputElement
+	get _editNode() : Et2Textbox
 	{
 		return this.shadowRoot.querySelector('et2-textbox');
 	}

api/js/etemplate/Et2Select/test/EditableTag.test.ts

@@ -149,6 +149,7 @@ describe("Select is not editable", () =>
 
 	it("Does not have edit button when not editable", async() =>
 	{
+		debugger;
 		let tag = element.select.combobox.querySelectorAll(tag_name);
 		assert.isAbove(tag.length, 0, "No tags found");
 

tsconfig.json

@@ -8,6 +8,7 @@
         "rootDir": "./",
         "emitDecoratorMetadata": false,
         "experimentalDecorators": true,
+      "useDefineForClassFields": false,
         "removeComments": false,
         "moduleResolution": "node",
         "noImplicitAny": false,