@ni/nimble-components 28.0.1 → 28.0.2

package/dist/esm/list-option/index.d.ts

@@ -27,6 +27,15 @@ export declare class ListOption extends FoundationListboxOption {
      * by the filtering process.
      */
     visuallyHidden: boolean;
+    /**
+     * @internal
+     * This attribute is used to control the visual selected state of an option. This
+     * is handled independently of the public 'selected' attribute, as 'selected' is
+     * representative of the current value of the container control. However, while
+     * a dropdown is open users can navigate through the options (requiring visual
+     * updates) without changing the value of the container control.
+     */
+    activeOption: boolean;
     /** @internal */
     hasOverflow: boolean;
     /** @internal */

package/dist/esm/list-option/index.js

@@ -26,6 +26,15 @@ export class ListOption extends FoundationListboxOption {
          * by the filtering process.
          */
         this.visuallyHidden = false;
+        /**
+         * @internal
+         * This attribute is used to control the visual selected state of an option. This
+         * is handled independently of the public 'selected' attribute, as 'selected' is
+         * representative of the current value of the container control. However, while
+         * a dropdown is open users can navigate through the options (requiring visual
+         * updates) without changing the value of the container control.
+         */
+        this.activeOption = false;
         /** @internal */
         this.hasOverflow = false;
     }
@@ -55,6 +64,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'visually-hidden', mode: 'boolean' })
 ], ListOption.prototype, "visuallyHidden", void 0);
+__decorate([
+    attr({ attribute: 'active-option', mode: 'boolean' })
+], ListOption.prototype, "activeOption", void 0);
 __decorate([
     observable
 ], ListOption.prototype, "hasOverflow", void 0);

package/dist/esm/list-option/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,uBAAuB;IAAvD;;QAII;;;;;;;WAOG;QAEa,WAAM,GAAG,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEI,mBAAc,GAAG,KAAK,CAAC;QAE9B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IA0B/B,CAAC;IAxBG,gBAAgB;IAChB,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAEe,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YAC5C,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;SAC3C;IACL,CAAC;IAEO,iBAAiB,CACrB,MAA0B;QAE1B,IAAI,CAAC,MAAM,EAAE;YACT,OAAO,KAAK,CAAC;SAChB;QAED,OAAO,OAAQ,MAA0B,CAAC,cAAc,KAAK,UAAU,CAAC;IAC5E,CAAC;CACJ;AAxCmB;IADf,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACK;AAUxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAIvB;IADN,UAAU;+CACgB;AA4B/B,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,uBAAuB;IAClC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    DesignSystem,\n    ListboxOption as FoundationListboxOption\n} from '@microsoft/fast-foundation';\nimport { observable, attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ListOptionOwner } from '../patterns/dropdown/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option': ListOption;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option\n */\nexport class ListOption extends FoundationListboxOption {\n    /** @internal */\n    public contentSlot!: HTMLSlotElement;\n\n    /**\n     * The hidden state of the element.\n     *\n     * @public\n     * @defaultValue - false\n     * @remarks\n     * HTML Attribute: hidden\n     */\n    @attr({ mode: 'boolean' })\n    public override hidden = false;\n\n    /**\n     * @internal\n     * This attribute is required to allow use-cases that offer dynamic filtering\n     * (like the Select) to visually hide options that are filtered out, but still\n     * allow users to use the native 'hidden' attribute without it being affected\n     * by the filtering process.\n     */\n    @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n    public visuallyHidden = false;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public get elementTextContent(): string {\n        return this.contentSlot\n            .assignedNodes()\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (this.isListOptionOwner(this.parentElement)) {\n            this.parentElement.registerOption(this);\n        }\n    }\n\n    private isListOptionOwner(\n        parent: HTMLElement | null\n    ): parent is ListOptionOwner {\n        if (!parent) {\n            return false;\n        }\n\n        return typeof (parent as ListOptionOwner).registerOption === 'function';\n    }\n}\n\nconst nimbleListOption = ListOption.compose({\n    baseName: 'list-option',\n    baseClass: FoundationListboxOption,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());\nexport const listOptionTag = 'nimble-list-option';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,uBAAuB;IAAvD;;QAII;;;;;;;WAOG;QAEa,WAAM,GAAG,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEI,mBAAc,GAAG,KAAK,CAAC;QAE9B;;;;;;;WAOG;QAEI,iBAAY,GAAG,KAAK,CAAC;QAE5B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IA0B/B,CAAC;IAxBG,gBAAgB;IAChB,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAEe,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YAC5C,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;SAC3C;IACL,CAAC;IAEO,iBAAiB,CACrB,MAA0B;QAE1B,IAAI,CAAC,MAAM,EAAE;YACT,OAAO,KAAK,CAAC;SAChB;QAED,OAAO,OAAQ,MAA0B,CAAC,cAAc,KAAK,UAAU,CAAC;IAC5E,CAAC;CACJ;AAnDmB;IADf,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACK;AAUxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAWvB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC1B;AAIrB;IADN,UAAU;+CACgB;AA4B/B,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,uBAAuB;IAClC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    DesignSystem,\n    ListboxOption as FoundationListboxOption\n} from '@microsoft/fast-foundation';\nimport { observable, attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ListOptionOwner } from '../patterns/dropdown/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option': ListOption;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option\n */\nexport class ListOption extends FoundationListboxOption {\n    /** @internal */\n    public contentSlot!: HTMLSlotElement;\n\n    /**\n     * The hidden state of the element.\n     *\n     * @public\n     * @defaultValue - false\n     * @remarks\n     * HTML Attribute: hidden\n     */\n    @attr({ mode: 'boolean' })\n    public override hidden = false;\n\n    /**\n     * @internal\n     * This attribute is required to allow use-cases that offer dynamic filtering\n     * (like the Select) to visually hide options that are filtered out, but still\n     * allow users to use the native 'hidden' attribute without it being affected\n     * by the filtering process.\n     */\n    @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n    public visuallyHidden = false;\n\n    /**\n     * @internal\n     * This attribute is used to control the visual selected state of an option. This\n     * is handled independently of the public 'selected' attribute, as 'selected' is\n     * representative of the current value of the container control. However, while\n     * a dropdown is open users can navigate through the options (requiring visual\n     * updates) without changing the value of the container control.\n     */\n    @attr({ attribute: 'active-option', mode: 'boolean' })\n    public activeOption = false;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public get elementTextContent(): string {\n        return this.contentSlot\n            .assignedNodes()\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (this.isListOptionOwner(this.parentElement)) {\n            this.parentElement.registerOption(this);\n        }\n    }\n\n    private isListOptionOwner(\n        parent: HTMLElement | null\n    ): parent is ListOptionOwner {\n        if (!parent) {\n            return false;\n        }\n\n        return typeof (parent as ListOptionOwner).registerOption === 'function';\n    }\n}\n\nconst nimbleListOption = ListOption.compose({\n    baseName: 'list-option',\n    baseClass: FoundationListboxOption,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());\nexport const listOptionTag = 'nimble-list-option';\n"]}

package/dist/esm/select/index.d.ts

@@ -103,7 +103,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
     get collapsible(): boolean;
     private _value;
     private forcedPosition;
-    private indexWhenOpened?;
+    private openActiveIndex?;
     /**
      * @internal
      */
@@ -196,6 +196,12 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     selectedIndexChanged(_: number | undefined, __: number): void;
+    /**
+     * @internal
+     * Fork of Listbox implementation, so that the selectedIndex is not changed while the dropdown
+     * is open.
+     */
+    typeaheadBufferChanged(_: string, __: string): void;
     /**
      * Synchronize the `aria-disabled` property when the `disabled` property changes.
      *
@@ -211,14 +217,29 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     formResetCallback(): void;
+    /**
+     * @internal
+     */
     selectNextOption(): void;
+    /**
+     * @internal
+     */
     selectPreviousOption(): void;
+    /**
+     * @internal
+     */
+    selectFirstOption(): void;
+    /**
+     * @internal
+     */
+    selectLastOption(): void;
     /**
      * @internal
      */
     registerOption(option: ListOption): void;
     protected setSelectedOptions(): void;
     protected focusAndScrollOptionIntoView(): void;
+    protected getTypeaheadMatches(): ListboxOption[];
     protected positionChanged(_: SelectPosition | undefined, next: SelectPosition | undefined): void;
     /**
      * Updates the proxy's size property when the size attribute changes.
@@ -249,6 +270,8 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     protected setDefaultSelectedOption(): void;
+    private setActiveOption;
+    private focusAndScrollActiveOptionIntoView;
     private committedSelectedOptionChanged;
     private setPositioning;
     /**
@@ -271,7 +294,6 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     private setProxyOptions;
-    private clearSelection;
     private filterChanged;
     private maxHeightChanged;
     private initializeOpenState;

package/dist/esm/select/index.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 // Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.ts
 import { attr, html, observable, Observable, volatile } from '@microsoft/fast-element';
 import { DesignSystem, Select as FoundationSelect, SelectPosition, applyMixins, StartEnd, DelegatesARIASelect } from '@microsoft/fast-foundation';
-import { keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from '@microsoft/fast-web-utilities';
+import { findLastIndex, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, uniqueId } from '@microsoft/fast-web-utilities';
 import { arrowExpanderDown16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
 import { DropdownAppearance } from '../patterns/dropdown/types';
@@ -75,7 +75,9 @@ export class Select extends FormAssociatedSelect {
     connectedCallback() {
         super.connectedCallback();
         this.forcedPosition = !!this.positionAttribute;
-        this.initializeOpenState();
+        if (this.open) {
+            this.initializeOpenState();
+        }
     }
     get value() {
         Observable.track(this, 'value');
@@ -174,7 +176,7 @@ export class Select extends FormAssociatedSelect {
         }
         super.clickHandler(e);
         this.open = this.collapsible && !this.open;
-        if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+        if (!this.open && this.selectedIndex !== -1) {
             this.updateValue(true);
         }
     }
@@ -286,22 +288,19 @@ export class Select extends FormAssociatedSelect {
      */
     inputHandler(e) {
         this.filter = this.filterInput?.value ?? '';
-        this.clearSelection();
         this.filterOptions();
-        if (this.filteredOptions.length > 0) {
-            const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
-            if (enabledOptions.length > 0) {
-                enabledOptions[0].selected = true;
-            }
-            else {
-                // only filtered option is disabled
-                this.selectedOptions = [];
-                this.selectedIndex = -1;
-            }
-        }
-        else if (this.committedSelectedOption) {
-            this.committedSelectedOption.selected = true;
-        }
+        const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
+        let activeOptionIndex = this.filter !== ''
+            ? this.openActiveIndex ?? this.selectedIndex
+            : this.selectedIndex;
+        if (enabledOptions.length > 0
+            && !enabledOptions.find(o => o === this.options[activeOptionIndex])) {
+            activeOptionIndex = this.options.indexOf(enabledOptions[0]);
+        }
+        else if (enabledOptions.length === 0) {
+            activeOptionIndex = -1;
+        }
+        this.setActiveOption(activeOptionIndex);
         if (e.inputType.includes('deleteContent') || !this.filter.length) {
             return true;
         }
@@ -322,11 +321,13 @@ export class Select extends FormAssociatedSelect {
             return true;
         }
         if (!this.options?.includes(focusTarget)) {
+            let currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
             this.open = false;
-            if (this.selectedIndex === -1) {
-                this.selectedIndex = this.indexWhenOpened;
+            if (currentActiveIndex === -1) {
+                currentActiveIndex = this.selectedIndex;
             }
-            if (this.indexWhenOpened !== this.selectedIndex) {
+            if (this.selectedIndex !== currentActiveIndex) {
+                this.selectedIndex = currentActiveIndex;
                 this.updateValue(true);
             }
         }
@@ -336,11 +337,13 @@ export class Select extends FormAssociatedSelect {
      * @internal
      */
     keydownHandler(e) {
+        const initialSelectedIndex = this.selectedIndex;
         super.keydownHandler(e);
         const key = e.key;
         if (e.ctrlKey || e.shiftKey) {
             return true;
         }
+        let currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
         switch (key) {
             case keySpace: {
                 // when dropdown is open allow user to enter a space for filter text
@@ -381,27 +384,19 @@ export class Select extends FormAssociatedSelect {
                     e.preventDefault();
                     this.open = false;
                 }
-                if (this.selectedIndex !== this.indexWhenOpened) {
-                    this.options[this.selectedIndex].selected = false;
-                    this.selectedIndex = this.indexWhenOpened;
-                }
+                currentActiveIndex = this.selectedIndex;
                 this.focus();
                 break;
             }
-            case keyTab: {
-                if (this.collapsible && this.open) {
-                    e.preventDefault();
-                    this.open = false;
-                }
-                return true;
-            }
             default: {
                 break;
             }
         }
-        if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+        if (!this.open && this.selectedIndex !== currentActiveIndex) {
+            this.selectedIndex = currentActiveIndex;
+        }
+        if (!this.open && initialSelectedIndex !== this.selectedIndex) {
             this.updateValue(true);
-            this.indexWhenOpened = this.selectedIndex;
         }
         return !(key === keyArrowDown || key === keyArrowUp);
     }
@@ -419,8 +414,28 @@ export class Select extends FormAssociatedSelect {
         // implementation handles skipping non-selected disabled options for the initial
         // selected value.
         this.setSelectedOptions();
+        if (this.open) {
+            this.setActiveOption(this.selectedIndex);
+        }
         this.updateValue();
     }
+    /**
+     * @internal
+     * Fork of Listbox implementation, so that the selectedIndex is not changed while the dropdown
+     * is open.
+     */
+    typeaheadBufferChanged(_, __) {
+        if (this.$fastController.isConnected) {
+            const typeaheadMatches = this.getTypeaheadMatches();
+            if (typeaheadMatches.length) {
+                const activeOptionIndex = this.options.indexOf(typeaheadMatches[0]);
+                if (!(this.open && this.filterMode !== FilterMode.none)) {
+                    this.setActiveOption(activeOptionIndex);
+                }
+            }
+            this.typeaheadExpired = false;
+        }
+    }
     /**
      * Synchronize the `aria-disabled` property when the `disabled` property changes.
      *
@@ -449,30 +464,52 @@ export class Select extends FormAssociatedSelect {
             this.selectedIndex = 0;
         }
     }
+    /**
+     * @internal
+     */
     selectNextOption() {
         // don't call super.selectNextOption as that relies on side-effecty
         // behavior to not select disabled option (which no longer works)
-        for (let i = this.selectedIndex + 1; i < this.options.length; i++) {
+        const startIndex = this.openActiveIndex ?? this.selectedIndex;
+        for (let i = startIndex + 1; i < this.options.length; i++) {
             const listOption = this.options[i];
             if (isNimbleListOption(listOption)
                 && isOptionSelectable(listOption)) {
-                this.selectedIndex = i;
+                this.setActiveOption(i);
                 break;
             }
         }
     }
+    /**
+     * @internal
+     */
     selectPreviousOption() {
         // don't call super.selectPreviousOption as that relies on side-effecty
         // behavior to not select disabled option (which no longer works)
-        for (let i = this.selectedIndex - 1; i >= 0; i--) {
+        const startIndex = this.openActiveIndex ?? this.selectedIndex;
+        for (let i = startIndex - 1; i >= 0; i--) {
             const listOption = this.options[i];
             if (isNimbleListOption(listOption)
                 && isOptionSelectable(listOption)) {
-                this.selectedIndex = i;
+                this.setActiveOption(i);
                 break;
             }
         }
     }
+    /**
+     * @internal
+     */
+    selectFirstOption() {
+        const newActiveOptionIndex = this.options.findIndex(o => isNimbleListOption(o) && isOptionSelectable(o));
+        this.setActiveOption(newActiveOptionIndex);
+    }
+    /**
+     * @internal
+     */
+    selectLastOption() {
+        const newActiveOptionIndex = findLastIndex(this.options, o => isNimbleListOption(o) && isOptionSelectable(o));
+        this.setActiveOption(newActiveOptionIndex);
+    }
     /**
      * @internal
      */
@@ -505,6 +542,11 @@ export class Select extends FormAssociatedSelect {
             });
         }
     }
+    getTypeaheadMatches() {
+        const matches = super.getTypeaheadMatches();
+        // Don't allow placeholder to be matched
+        return matches.filter(o => !o.hidden && !o.disabled);
+    }
     positionChanged(_, next) {
         this.positionAttribute = next;
         this.setPositioning();
@@ -530,9 +572,13 @@ export class Select extends FormAssociatedSelect {
         }
         if (this.open) {
             this.initializeOpenState();
-            this.indexWhenOpened = this.selectedIndex;
             return;
         }
+        const activeOption = this.options[this.openActiveIndex ?? this.selectedIndex];
+        if (isNimbleListOption(activeOption)) {
+            activeOption.activeOption = false;
+        }
+        this.openActiveIndex = undefined;
         this.filter = '';
         if (this.filterInput) {
             this.filterInput.value = '';
@@ -599,6 +645,40 @@ export class Select extends FormAssociatedSelect {
         }
         this.committedSelectedOption = options[this.selectedIndex];
     }
+    setActiveOption(newActiveIndex) {
+        const activeOption = this.options[newActiveIndex];
+        if (this.open) {
+            if (isNimbleListOption(activeOption)) {
+                activeOption.activeOption = true;
+            }
+            const previousActiveIndex = this.openActiveIndex ?? this.selectedIndex;
+            const previousActiveOption = this.options[previousActiveIndex];
+            if (previousActiveIndex !== newActiveIndex
+                && isNimbleListOption(previousActiveOption)) {
+                previousActiveOption.activeOption = false;
+            }
+            this.openActiveIndex = newActiveIndex;
+            this.focusAndScrollActiveOptionIntoView();
+        }
+        else {
+            this.selectedIndex = newActiveIndex;
+        }
+        this.ariaActiveDescendant = activeOption?.id ?? '';
+    }
+    focusAndScrollActiveOptionIntoView() {
+        const optionToFocus = this.options[this.openActiveIndex ?? this.selectedIndex];
+        // Copied from FAST: To ensure that the browser handles both `focus()` and
+        // `scrollIntoView()`, the timing here needs to guarantee that they happen on
+        // different frames. Since this function is typically called from the `openChanged`
+        // observer, `DOM.queueUpdate` causes the calls to be grouped into the same frame.
+        // To prevent this, `requestAnimationFrame` is used instead of `DOM.queueUpdate`.
+        if (optionToFocus !== undefined && this.contains(optionToFocus)) {
+            optionToFocus.focus();
+            requestAnimationFrame(() => {
+                optionToFocus.scrollIntoView({ block: 'nearest' });
+            });
+        }
+    }
     committedSelectedOptionChanged() {
         this.updateDisplayValue();
     }
@@ -694,11 +774,6 @@ export class Select extends FormAssociatedSelect {
             });
         }
     }
-    clearSelection() {
-        this.options.forEach(option => {
-            option.selected = false;
-        });
-    }
     filterChanged() {
         this.filterOptions();
     }
@@ -706,12 +781,8 @@ export class Select extends FormAssociatedSelect {
         this.updateListboxMaxHeightCssVariable();
     }
     initializeOpenState() {
-        if (!this.open) {
-            this.ariaExpanded = 'false';
-            this.ariaControls = '';
-            return;
-        }
         this.committedSelectedOption = this.options[this.selectedIndex];
+        this.setActiveOption(this.selectedIndex);
         this.ariaControls = this.listboxId;
         this.ariaExpanded = 'true';
         this.setPositioning();