diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts index 8346f89cfd..286ea9733d 100644 --- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts +++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts @@ -79,25 +79,6 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement { this.setSelectedViaUserInteraction(true); } - protected setupHighlightHandler(event: Event): void { - const slotNodes = (event.target as HTMLSlotElement).assignedNodes(); - const labelNodes = slotNodes.filter((el) => el.nodeType === Node.TEXT_NODE) as Text[]; - - // Disable the highlight if the slot contains more than just text nodes - if ( - labelNodes.length === 0 || - slotNodes.filter((n) => !(n instanceof Element) || n.localName !== 'template').length !== - labelNodes.length - ) { - this.disableLabelHighlight = true; - return; - } - this.label = labelNodes - .map((l) => l.wholeText) - .filter((l) => l.trim()) - .join(); - } - protected override render(): TemplateResult { return super.render(); } diff --git a/src/components/core/common-behaviors/option-base-element.ts b/src/components/core/common-behaviors/option-base-element.ts index 0e78d62557..534fabdbb4 100644 --- a/src/components/core/common-behaviors/option-base-element.ts +++ b/src/components/core/common-behaviors/option-base-element.ts @@ -59,7 +59,7 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM private _abort = new ConnectedAbortController(this); protected abstract selectByClick(event: MouseEvent): void; - protected abstract setupHighlightHandler(event: Event): void; + // protected abstract setupHighlightHandler(event: Event): void; protected abstract setAttributeFromParent(): void; /** @@ -126,6 +126,25 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM } } + protected setupHighlightHandler(event: Event): void { + const slotNodes = (event.target as HTMLSlotElement).assignedNodes(); + const labelNodes = slotNodes.filter((el) => el.nodeType === Node.TEXT_NODE) as Text[]; + + // Disable the highlight if the slot contains more than just text nodes + if ( + labelNodes.length === 0 || + slotNodes.filter((n) => !(n instanceof Element) || n.localName !== 'template').length !== + labelNodes.length + ) { + this.disableLabelHighlight = true; + return; + } + this.label = labelNodes + .map((l) => l.wholeText) + .filter((l) => l.trim()) + .join(); + } + protected getHighlightedLabel(): TemplateResult { if (!this._highlightString || !this._highlightString.trim()) { return html`${this.label}`; diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts index 897a96446c..50405627c7 100644 --- a/src/components/option/option/option.ts +++ b/src/components/option/option/option.ts @@ -102,28 +102,13 @@ export class SbbOptionElement extends SbbOptionBaseElement { } } - protected setupHighlightHandler(event: Event): void { + protected override setupHighlightHandler(event: Event): void { if (!this._isAutocomplete) { this.disableLabelHighlight = true; return; } - const slotNodes = (event.target as HTMLSlotElement).assignedNodes(); - const labelNodes = slotNodes.filter((el) => el.nodeType === Node.TEXT_NODE) as Text[]; - - // Disable the highlight if the slot contains more than just text nodes - if ( - labelNodes.length === 0 || - slotNodes.filter((n) => !(n instanceof Element) || n.localName !== 'template').length !== - labelNodes.length - ) { - this.disableLabelHighlight = true; - return; - } - this.label = labelNodes - .map((l) => l.wholeText) - .filter((l) => l.trim()) - .join(); + super.setupHighlightHandler(event); } protected override renderIcon(): TemplateResult {