fix(dees-input-list,dees-icon): preserve input focus after list updates and make icons ignore pointer events
This commit is contained in:
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -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.'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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 */
|
||||||
|
|||||||
Reference in New Issue
Block a user