fix(dees-input-list,dees-icon): preserve input focus after list updates and make icons ignore pointer events

This commit is contained in:
2026-04-06 10:41:20 +00:00
parent a5f7a7ecee
commit b5055b0696
4 changed files with 20 additions and 13 deletions

View File

@@ -1,5 +1,11 @@
# Changelog # 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) ## 2026-04-05 - 3.61.1 - fix(dees-input-list)
align list input with dees-tile styling and improve item affordances align list input with dees-tile styling and improve item affordances

View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', 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.' description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
} }

View File

@@ -665,11 +665,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
this.currentCandidateIndex = -1; this.currentCandidateIndex = -1;
this.matchingCandidates = []; this.matchingCandidates = [];
this.validationText = ''; this.validationText = '';
this.emitChange();
// Re-focus input after Lit re-renders
this.updateComplete.then(() => {
const input = this.shadowRoot?.querySelector('.add-input') as HTMLInputElement; const input = this.shadowRoot?.querySelector('.add-input') as HTMLInputElement;
if (input) { input.value = ''; input.focus(); } if (input) { input.value = ''; input.focus(); }
});
this.emitChange();
} }
/** /**
@@ -708,15 +710,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
this.value = [...this.value, trimmedValue]; this.value = [...this.value, trimmedValue];
this.inputValue = ''; this.inputValue = '';
this.validationText = ''; this.validationText = '';
// Clear the input
const input = this.shadowRoot?.querySelector('.add-input') as HTMLInputElement;
if (input) {
input.value = '';
input.focus();
}
this.emitChange(); 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) { private startEdit(index: number) {

View File

@@ -338,6 +338,7 @@ export class DeesIcon extends DeesElement {
justify-content: center; justify-content: center;
line-height: 1; line-height: 1;
vertical-align: middle; vertical-align: middle;
pointer-events: none;
} }
/* Improve rendering performance */ /* Improve rendering performance */