diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 0da89e80d..633e61af2 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -17,6 +17,7 @@ During the alpha period, things might break! We take breaking changes very serio - Fixed `wa-pill` class for text fields - Fixed `pill` style for `` elements - Fixed a bug in `` that prevented light dismiss from working when clicking immediately above the color picker dropdown +- Fixed a bug in `` that sometimes resulted in empty `
` elements being output ## 3.0.0-alpha.11 diff --git a/src/components/select/select.ts b/src/components/select/select.ts index d7ab3c3b6..6f8b9336e 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -291,7 +291,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { ?pill=${this.pill} size=${this.size} removable - @wa-remove=${(event: WaRemoveEvent) => this.handleTagRemove(event, option)} > ${option.label} @@ -587,10 +586,39 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { this.setSelectedOptions(allOptions.filter(el => value.includes(el.value))); } - private handleTagRemove(event: WaRemoveEvent, option: WaOption) { + private handleTagRemove(event: WaRemoveEvent, directOption?: WaOption) { event.stopPropagation(); - if (!this.disabled) { + if (this.disabled) return; + + // Use the directly provided option if available (from getTag method) + let option = directOption; + + // If no direct option was provided, find the option from the event path + if (!option) { + const path = event.composedPath(); + const tagElement = path.find( + el => + el instanceof HTMLElement && + (el.tagName.toLowerCase() === 'wa-tag' || + (el instanceof HTMLElement && el.hasAttribute('part') && el.getAttribute('part')?.includes('tag'))), + ); + + if (tagElement) { + // Find the index of this tag among all tags + const tagsContainer = this.shadowRoot?.querySelector('[part="tags"]'); + if (tagsContainer) { + const allTags = Array.from(tagsContainer.children); + const index = allTags.indexOf(tagElement as HTMLElement); + + if (index >= 0 && index < this.selectedOptions.length) { + option = this.selectedOptions[index]; + } + } + } + } + + if (option) { this.toggleOptionSelection(option, false); // Emit after updating @@ -707,10 +735,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { return this.selectedOptions.map((option, index) => { if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) { const tag = this.getTag(option, index); - // Wrap so we can handle the remove - return html`
this.handleTagRemove(e, option)}> - ${typeof tag === 'string' ? unsafeHTML(tag) : tag} -
`; + if (!tag) return null; + return typeof tag === 'string' ? unsafeHTML(tag) : tag; } else if (index === this.maxOptionsVisible) { // Hit tag limit return html` @@ -726,7 +752,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { > `; } - return html``; + return null; }); } @@ -926,7 +952,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { /> - ${this.multiple && this.hasUpdated ? html`
${this.tags}
` : ''} + ${this.multiple && this.hasUpdated + ? html`
${this.tags}
` + : ''}