Add clear button for Select

change/@ni-nimble-components-d350a4f5-967b-4b4d-9f31-96c60b0c63cf.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add clear button for Select",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/patterns/dropdown/styles.ts

@@ -189,7 +189,7 @@ export const styles = css`
 
     .indicator {
         flex: none;
-        margin-inline-start: 1em;
+        margin-left: ${smallPadding};
         padding-right: 8px;
         display: flex;
         justify-content: center;

packages/nimble-components/src/select/index.ts

@@ -61,6 +61,10 @@ const isOptionSelectable = (el: ListOption): boolean => {
     return !el.visuallyHidden && !el.disabled && !el.hidden;
 };
 
+const isOptionPlaceholder = (el: ListboxOption): boolean => {
+    return el.disabled && el.hidden;
+};
+
 /**
  * A nimble-styled HTML select.
  */
@@ -94,6 +98,9 @@ export class Select
     @attr({ attribute: 'filter-mode' })
     public filterMode: FilterMode = FilterMode.none;
 
+    @attr({ attribute: 'clearable', mode: 'boolean' })
+    public clearable = false;
+
     /**
      * @internal
      */
@@ -245,10 +252,9 @@ export class Select
                 );
             }
             Observable.notify(this, 'value');
-            if (this.collapsible) {
-                Observable.notify(this, 'displayValue');
-            }
         }
+
+        Observable.notify(this, 'displayValue');
     }
 
     /**
@@ -370,10 +376,18 @@ export class Select
                 break;
             }
             case 'selected': {
-                if (isNimbleListOption(sourceElement)) {
+                if (
+                    isNimbleListOption(sourceElement)
+                    && sourceElement.selected
+                ) {
                     this.selectedIndex = this.options.indexOf(sourceElement);
+                } else {
+                    const placeholderOption = this.getPlaceholderOption();
+                    this.selectedIndex = placeholderOption
+                        ? this.options.indexOf(placeholderOption)
+                        : -1;
                 }
-                this.setSelectedOptions();
+                this.updateValue();
                 this.updateDisplayValue();
                 break;
             }
@@ -449,14 +463,27 @@ export class Select
         );
     }
 
+    /**
+     * @internal
+     */
+    public clearClickHandler(e: MouseEvent): void {
+        this.open = false;
+        const placeholderOption = this.getPlaceholderOption();
+        this.selectedIndex = placeholderOption
+            ? this.options.indexOf(placeholderOption)
+            : -1;
+        this.updateValue(true);
+        e.stopPropagation();
+    }
+
     /**
      * @internal
      */
     public updateDisplayValue(): void {
+        const placeholderOption = this.getPlaceholderOption();
         if (
-            this.committedSelectedOption?.disabled
-            && this.committedSelectedOption?.hidden
-            && this.committedSelectedOption?.selected
+            placeholderOption
+            && this.committedSelectedOption === placeholderOption
         ) {
             this.displayPlaceholder = true;
         } else {
@@ -671,6 +698,7 @@ export class Select
         if (this.selectedIndex === -1) {
             this.selectedIndex = 0;
         }
+        this.updateValue();
     }
 
     /**
@@ -749,10 +777,10 @@ export class Select
         this.options.push(option);
     }
 
-    // Prevents parent classes from resetting selectedIndex to a positive
-    // value while filtering, which can result in a disabled option being
-    // selected.
     protected override setSelectedOptions(): void {
+        // Prevents parent classes from resetting selectedIndex to a positive
+        // value while filtering, which can result in a disabled option being
+        // selected.
         if (this.open && this.selectedIndex === -1) {
             return;
         }
@@ -869,21 +897,27 @@ export class Select
         };
         let selectedIndex = -1;
         let firstValidOptionIndex = -1;
+        let placeholderIndex = -1;
         for (let i = 0; i < options?.length; i++) {
-            const option = options[i];
-            if (optionIsSelected(option!) || option?.value === this.value) {
+            const option = options[i]!;
+            if (optionIsSelected(option) || option.value === this.value) {
                 selectedIndex = i;
-            }
-            if (
+                break;
+            } else if (placeholderIndex === -1 && isOptionPlaceholder(option)) {
+                placeholderIndex = i;
+            } else if (
                 firstValidOptionIndex === -1
-                && isOptionSelectable(option! as ListOption)
+                && placeholderIndex === -1
+                && isOptionSelectable(option as ListOption)
             ) {
                 firstValidOptionIndex = i;
             }
         }
 
         if (selectedIndex !== -1) {
             this.selectedIndex = selectedIndex;
+        } else if (placeholderIndex !== -1) {
+            this.selectedIndex = placeholderIndex;
         } else if (firstValidOptionIndex !== -1) {
             this.selectedIndex = firstValidOptionIndex;
         } else {
@@ -932,6 +966,10 @@ export class Select
         }
     }
 
+    private getPlaceholderOption(): ListOption | undefined {
+        return this.options.find(o => o.hidden && o.disabled) as ListOption;
+    }
+
     private committedSelectedOptionChanged(): void {
         this.updateDisplayValue();
     }
@@ -1009,6 +1047,7 @@ export class Select
     private updateValue(shouldEmit?: boolean): void {
         if (this.$fastController.isConnected) {
             this.value = this.firstSelectedOption?.value ?? '';
+            this.committedSelectedOption = this.firstSelectedOption;
         }
 
         if (shouldEmit) {

packages/nimble-components/src/select/styles.ts

@@ -38,7 +38,14 @@ export const styles = css`
     }
 
     [part='indicator'] {
+        order: 4;
+    }
+
+    .clear-button {
         order: 3;
+        width: auto;
+        height: auto;
+        margin-left: ${smallPadding};
     }
 
     .error-icon {

packages/nimble-components/src/select/template.ts

@@ -22,6 +22,8 @@ import {
     filterSearchLabel
 } from '../label-provider/core/label-tokens';
 import { FilterMode } from './types';
+import { buttonTag } from '../button';
+import { iconXmarkTag } from '../icons/xmark';
 
 /* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
@@ -65,6 +67,15 @@ SelectOptions
                     <div class="selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
                         <slot name="selected-value">${x => x.displayValue}</slot>
                     </div>
+                    ${when(x => x.clearable && !x.displayPlaceholder && x.selectedIndex >= 0, html<Select>`
+                        <${buttonTag} 
+                            class="clear-button"
+                            content-hidden
+                            appearance="ghost"
+                            @click="${(x, c) => x.clearClickHandler(c.event as MouseEvent)}">
+                            <${iconXmarkTag} slot="start"></${iconXmarkTag}>
+                        </${buttonTag}>
+                    `)}
                     <div aria-hidden="true" class="indicator" part="indicator">
                         <slot name="indicator">
                             ${definition.indicator || ''}

packages/nimble-components/src/select/testing/select.pageobject.ts

@@ -10,6 +10,7 @@ import type { Select } from '..';
 import type { ListOption } from '../../list-option';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { FilterMode } from '../types';
+import type { Button } from '../../button';
 
 /**
  * Page object for the `nimble-select` component to provide consistent ways
@@ -128,6 +129,11 @@ export class SelectPageObject {
         this.clickOption(optionIndex);
     }
 
+    public clickClearButton(): void {
+        const clearButton = this.getClearButton();
+        clearButton?.click();
+    }
+
     public async clickAway(): Promise<void> {
         this.selectElement.dispatchEvent(new Event('focusout'));
         await waitForUpdatesAsync();
@@ -218,6 +224,14 @@ export class SelectPageObject {
         );
     }
 
+    public isClearButtonVisible(): boolean {
+        return (
+            this.selectElement.shadowRoot?.querySelector<Button>(
+                '.clear-button'
+            ) != null
+        );
+    }
+
     public isFilterInputVisible(): boolean {
         return (
             this.selectElement.shadowRoot?.querySelector('.filter-field')
@@ -246,20 +260,6 @@ export class SelectPageObject {
         return this.selectElement.filterInput?.value ?? '';
     }
 
-    public async waitForChange(): Promise<string> {
-        return new Promise(resolve => {
-            this.selectElement.addEventListener(
-                'change',
-                () => {
-                    resolve(this.selectElement.value);
-                },
-                {
-                    once: true
-                }
-            );
-        });
-    }
-
     private getFilterInput(): HTMLInputElement | null | undefined {
         if (this.selectElement.filterMode === FilterMode.none) {
             throw new Error(
@@ -268,4 +268,25 @@ export class SelectPageObject {
         }
         return this.selectElement.filterInput;
     }
+
+    private getClearButton(): Button | null | undefined {
+        if (!this.selectElement.clearable) {
+            throw new Error(
+                'Select must set "clearable" in order to click clear button'
+            );
+        }
+
+        if (
+            this.selectElement.selectedIndex === -1
+            || this.selectElement.displayPlaceholder
+        ) {
+            throw new Error(
+                'Select must have a selected element in order to click clear button'
+            );
+        }
+
+        return this.selectElement.shadowRoot?.querySelector<Button>(
+            '.clear-button'
+        );
+    }
 }