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
      */
@@ -170,12 +177,6 @@ export class Select
     @observable
     public filter = '';
 
-    /**
-     * @internal
-     */
-    @observable
-    public committedSelectedOption?: ListboxOption;
-
     /**
      * The max height for the listbox when opened.
      *
@@ -239,15 +240,8 @@ export class Select
         if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
             this._value = newValue;
             super.valueChanged(prev, newValue);
-            if (!this.open) {
-                this.committedSelectedOption = this.options.find(
-                    o => o.value === newValue
-                );
-            }
             Observable.notify(this, 'value');
-            if (this.collapsible) {
-                Observable.notify(this, 'displayValue');
-            }
+            this.updateDisplayValue();
         }
     }
 
@@ -257,7 +251,7 @@ export class Select
     @volatile
     public get displayValue(): string {
         Observable.track(this, 'displayValue');
-        return this.committedSelectedOption?.text ?? '';
+        return this.firstSelectedOption?.text ?? '';
     }
 
     /**
@@ -315,7 +309,6 @@ export class Select
         if (value) {
             this.value = value;
         }
-        this.committedSelectedOption = this.options[this.selectedIndex];
     }
 
     /**
@@ -370,11 +363,14 @@ export class Select
                 break;
             }
             case 'selected': {
-                if (isNimbleListOption(sourceElement)) {
+                if (
+                    isNimbleListOption(sourceElement)
+                    && sourceElement.selected
+                ) {
                     this.selectedIndex = this.options.indexOf(sourceElement);
+                } else {
+                    this.clearSelect();
                 }
-                this.setSelectedOptions();
-                this.updateDisplayValue();
                 break;
             }
             case 'hidden': {
@@ -443,29 +439,28 @@ export class Select
     /**
      * @internal
      */
-    public changeValueHandler(): void {
-        this.committedSelectedOption = this.options.find(
-            option => option.selected
-        );
+    public clearClickHandler(e: MouseEvent): void {
+        this.open = false;
+        this.clearSelect();
+        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.firstSelectedOption === placeholderOption
         ) {
             this.displayPlaceholder = true;
         } else {
             this.displayPlaceholder = false;
         }
 
-        if (this.collapsible) {
-            Observable.notify(this, 'displayValue');
-        }
+        Observable.notify(this, 'displayValue');
     }
 
     /**
@@ -749,10 +744,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,27 +864,31 @@ 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)
+                && 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 {
             this.selectedIndex = 0;
         }
-        this.committedSelectedOption = options[this.selectedIndex];
     }
 
     private setActiveOption(newActiveIndex: number): void {
@@ -932,8 +931,8 @@ export class Select
         }
     }
 
-    private committedSelectedOptionChanged(): void {
-        this.updateDisplayValue();
+    private getPlaceholderOption(): ListOption | undefined {
+        return this.options.find(o => o.hidden && o.disabled) as ListOption;
     }
 
     private setPositioning(): void {
@@ -1020,6 +1019,13 @@ export class Select
         }
     }
 
+    private clearSelect(): void {
+        const placeholder = this.getPlaceholderOption();
+        this.selectedIndex = placeholder
+            ? this.options.indexOf(placeholder)
+            : -1;
+    }
+
     /**
      * Resets and fills the proxy to match the component's options.
      *
@@ -1050,7 +1056,6 @@ export class Select
     }
 
     private initializeOpenState(): void {
-        this.committedSelectedOption = this.options[this.selectedIndex];
         this.setActiveOption(this.selectedIndex);
         this.ariaControls = this.listboxId;
         this.ariaExpanded = 'true';

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

@@ -37,8 +37,15 @@ export const styles = css`
         order: 1;
     }
 
-    [part='indicator'] {
+    .clear-button {
         order: 3;
+        width: auto;
+        height: auto;
+        margin-left: ${smallPadding};
+    }
+
+    [part='indicator'] {
+        order: 4;
     }
 
     .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
@@ -46,7 +48,6 @@ SelectOptions
         role="combobox"
         tabindex="${x => (!x.disabled ? '0' : null)}"
         @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
-        @change="${x => x.changeValueHandler()}"
         @contentchange="${x => x.updateDisplayValue()}"
         @focusin="${(x, c) => x.focusinHandler(c.event as FocusEvent)}"
         @focusout="${(x, c) => x.focusoutHandler(c.event as FocusEvent)}"
@@ -65,6 +66,16 @@ 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"
+                            part="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,26 @@ export class SelectPageObject {
         this.clickOption(optionIndex);
     }
 
+    public clickClearButton(): void {
+        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'
+            );
+        }
+
+        const clearButton = this.getClearButton();
+        clearButton?.click();
+    }
+
     public async clickAway(): Promise<void> {
         this.selectElement.dispatchEvent(new Event('focusout'));
         await waitForUpdatesAsync();
@@ -218,6 +239,10 @@ export class SelectPageObject {
         );
     }
 
+    public isClearButtonVisible(): boolean {
+        return this.getClearButton() != null;
+    }
+
     public isFilterInputVisible(): boolean {
         return (
             this.selectElement.shadowRoot?.querySelector('.filter-field')
@@ -246,20 +271,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 +279,10 @@ export class SelectPageObject {
         }
         return this.selectElement.filterInput;
     }
+
+    private getClearButton(): Button | null | undefined {
+        return this.selectElement.shadowRoot?.querySelector<Button>(
+            '.clear-button'
+        );
+    }
 }