Show a message when there are no filter matches in combobox

.changeset/tough-papayas-sip.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/combobox': patch
+---
+
+Show a message when there are no filter matches

packages/components/combobox/src/combobox.spec.ts

@@ -825,6 +825,27 @@ describe('sl-combobox', () => {
         expect(options[1]).to.be.displayed;
         expect(options[2]).to.be.displayed;
       });
+
+      it('should show a message when there are no matches', async () => {
+        input.focus();
+        await sendKeys({ type: 'Foo' });
+
+        const noMatch = el.querySelector('sl-combobox-no-match');
+        expect(noMatch).to.exist;
+        expect(noMatch?.renderRoot).to.have.text('No options starting with "Foo" have been found.');
+      });
+
+      it('should remove the message when there are matches', async () => {
+        input.focus();
+        await sendKeys({ type: 'Foo' });
+
+        expect(el.querySelector('sl-combobox-no-match')).to.exist;
+
+        input.select();
+        await sendKeys({ press: 'Backspace' });
+
+        expect(el.querySelector('sl-combobox-no-match')).not.to.exist;
+      });
     });
 
     describe('group selected', () => {

packages/components/combobox/src/combobox.ts

@@ -14,6 +14,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import styles from './combobox.scss.js';
 import { CreateCustomOption } from './create-custom-option.js';
 import { CustomOption } from './custom-option.js';
+import { NoMatch } from './no-match.js';
 import { SelectedGroup } from './selected-group.js';
 
 declare global {
@@ -57,6 +58,7 @@ export class Combobox<T = unknown> extends FormControlMixin(ScopedElementsMixin(
     return {
       'sl-combobox-create-custom-option': CreateCustomOption,
       'sl-combobox-custom-option': CustomOption,
+      'sl-combobox-no-match': NoMatch,
       'sl-combobox-selected-group': SelectedGroup,
       'sl-icon': Icon,
       'sl-option': Option,
@@ -75,6 +77,9 @@ export class Combobox<T = unknown> extends FormControlMixin(ScopedElementsMixin(
   /** Event controller. */
   #events = new EventsController(this, { click: this.#onClick });
 
+  /** Message element for when filtering results did not yield any results. */
+  #noMatch?: NoMatch;
+
   /** Monitor the DOM for new options. */
   #observer = new MutationObserver(() => this.#updateOptions());
 
@@ -670,16 +675,31 @@ export class Combobox<T = unknown> extends FormControlMixin(ScopedElementsMixin(
   }
 
   #updateFilteredOptions(value?: string): void {
+    let noMatch = true;
+
     this.options.forEach(option => {
       let match = !this.filterResults || !value;
       if (!match) {
         match = option.content.toLowerCase().startsWith(value!.toLowerCase());
       }
 
+      if (noMatch && match) {
+        noMatch = false;
+      }
+
       if (option.element) {
         option.element.style.display = match ? '' : 'none';
       }
     });
+
+    if (noMatch && value) {
+      this.#noMatch ||= this.shadowRoot!.createElement('sl-combobox-no-match') as NoMatch;
+      this.#noMatch.value = value;
+      this.listbox?.prepend(this.#noMatch);
+    } else {
+      this.#noMatch?.remove();
+      this.#noMatch = undefined;
+    }
   }
 
   /** Updates the list of options and the listbox link with the text input. */

packages/components/combobox/src/no-match.scss

@@ -0,0 +1,4 @@
+:host {
+  color: var(--sl-color-text-plain);
+  padding-inline: var(--sl-space-new-md);
+}

packages/components/combobox/src/no-match.ts

@@ -0,0 +1,26 @@
+import { localized, msg, str } from '@lit/localize';
+import { type CSSResultGroup, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './no-match.scss.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-combobox-no-match': NoMatch;
+  }
+}
+
+/**
+ * Message component for when filtering a listbox yields no matches.
+ */
+@localized()
+export class NoMatch extends LitElement {
+  /** @internal */
+  static override styles: CSSResultGroup = styles;
+
+  /** The string that did not yield any matches. */
+  @property() value?: string;
+
+  override render(): string {
+    return msg(str`No options starting with "${this.value}" have been found.`);
+  }
+}

packages/locales/src/nl.ts

@@ -9,6 +9,7 @@ export const templates = {
   s129fac0ae1df7c8f: 'waarschuwing',
   s13fdff160ffad275: 'Wis tekst',
   s19fe06e3408e53d0: 'succes',
+  s2362b49263f76ec8: str`Geen opties gevonden die beginnen met "${0}".`,
   s2ceb11be2290bb1b: 'Annuleren',
   s39bba60b440fcf00: 'verplicht',
   s4215e0aa2fa8f5b4: 'Type hier om te filteren',

packages/locales/src/nl.xlf

@@ -170,6 +170,10 @@
   <source>Please select at least one option.</source>
   <target>Selecteer tenminste één optie.</target>
 </trans-unit>
+<trans-unit id="s2362b49263f76ec8">
+  <source>No options starting with "<x id="0" equiv-text="${this.value}"/>" have been found.</source>
+  <target>Geen opties gevonden die beginnen met "<x id="0" equiv-text="${this.value}"/>".</target>
+</trans-unit>
 </body>
 </file>
 </xliff>