diff --git a/changelog.md b/changelog.md index 946a663..5de4b02 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,11 @@ # Changelog +## 2026-04-06 - 3.61.2 - fix(dees-input-list,dees-icon) +preserve input focus after list updates and make icons ignore pointer events + +- Delays refocusing the add input in dees-input-list until after Lit re-renders complete when adding or removing entries. +- Adds pointer-events: none to dees-icon so icons do not block click interactions on surrounding controls. + ## 2026-04-05 - 3.61.1 - fix(dees-input-list) align list input with dees-tile styling and improve item affordances diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index a1ab1c4..04be2b2 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.61.1', + version: '3.61.2', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts index 4dd7a4e..ba5bd68 100644 --- a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts +++ b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts @@ -665,11 +665,13 @@ export class DeesInputList extends DeesInputBase { this.currentCandidateIndex = -1; this.matchingCandidates = []; this.validationText = ''; - - const input = this.shadowRoot?.querySelector('.add-input') as HTMLInputElement; - if (input) { input.value = ''; input.focus(); } - this.emitChange(); + + // Re-focus input after Lit re-renders + this.updateComplete.then(() => { + const input = this.shadowRoot?.querySelector('.add-input') as HTMLInputElement; + if (input) { input.value = ''; input.focus(); } + }); } /** @@ -708,15 +710,13 @@ export class DeesInputList extends DeesInputBase { this.value = [...this.value, trimmedValue]; this.inputValue = ''; this.validationText = ''; - - // Clear the input - const input = this.shadowRoot?.querySelector('.add-input') as HTMLInputElement; - if (input) { - input.value = ''; - input.focus(); - } - this.emitChange(); + + // Re-focus input after Lit re-renders + this.updateComplete.then(() => { + const input = this.shadowRoot?.querySelector('.add-input') as HTMLInputElement; + if (input) { input.value = ''; input.focus(); } + }); } private startEdit(index: number) { diff --git a/ts_web/elements/00group-utility/dees-icon/dees-icon.ts b/ts_web/elements/00group-utility/dees-icon/dees-icon.ts index 3f6361a..ac6e3f1 100644 --- a/ts_web/elements/00group-utility/dees-icon/dees-icon.ts +++ b/ts_web/elements/00group-utility/dees-icon/dees-icon.ts @@ -338,6 +338,7 @@ export class DeesIcon extends DeesElement { justify-content: center; line-height: 1; vertical-align: middle; + pointer-events: none; } /* Improve rendering performance */