From d1bfe30c79795cd21c94195b8d812217a1cbb76f Mon Sep 17 00:00:00 2001 From: nathan Date: Tue, 5 Mar 2024 11:51:33 -0700 Subject: [PATCH] Fix editable tags failed their tests editable was not passed to tag, edit mode broke --- .../Et2InputWidget/Et2InputWidget.ts | 6 +++++- api/js/etemplate/Et2Select/Et2Select.ts | 2 +- api/js/etemplate/Et2Select/Tag/Et2Tag.ts | 20 ++++++++----------- .../Et2Select/test/EditableTag.test.ts | 1 + tsconfig.json | 1 + 5 files changed, 16 insertions(+), 14 deletions(-) diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts index 5a47ea4ffc..4440b57c6a 100644 --- a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts +++ b/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 = >(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 = >(superclass : T) this.defaultValidators = []; this._messagesHeldWhileFocused = []; - this.__readonly = false; + this.readonly = false; this._oldValue = this.getValue(); this.isSlComponent = typeof (this).handleChange === 'function'; @@ -390,12 +392,14 @@ const Et2InputWidgetMixin = >(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")) diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index 81c4832630..ad827b7bee 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/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} diff --git a/api/js/etemplate/Et2Select/Tag/Et2Tag.ts b/api/js/etemplate/Et2Select/Tag/Et2Tag.ts index 779cdd9fe4..d6945815d8 100644 --- a/api/js/etemplate/Et2Select/Tag/Et2Tag.ts +++ b/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() - { - return { - ...super.properties, - editable: {type: Boolean, reflect: true}, - value: {type: String, reflect: true} - } - } + @property({type: Boolean}) editable = false; + @property({type: String, reflect: true}) value = ""; @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'); } diff --git a/api/js/etemplate/Et2Select/test/EditableTag.test.ts b/api/js/etemplate/Et2Select/test/EditableTag.test.ts index c6521e4aac..2054eefdb8 100644 --- a/api/js/etemplate/Et2Select/test/EditableTag.test.ts +++ b/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"); diff --git a/tsconfig.json b/tsconfig.json index c9cd29e29f..5f38e1d981 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,6 +8,7 @@ "rootDir": "./", "emitDecoratorMetadata": false, "experimentalDecorators": true, + "useDefineForClassFields": false, "removeComments": false, "moduleResolution": "node", "noImplicitAny": false,