+ ${startSlotTemplate(context, definition)}
+
+ (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
+ ${x => x.displayValue}
+
+
+
+ ${definition.indicator || ''}
+
+
+
+ ${endSlotTemplate(context, definition)}
+
-
n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
- flatten: true,
- property: 'slottedOptions',
- })}
- >
+
+
+ ${when(x => x.filterMode !== FilterMode.none, html
diff --git a/packages/nimble-components/src/select/testing/select.pageobject.ts b/packages/nimble-components/src/select/testing/select.pageobject.ts
new file mode 100644
index 0000000000..a4d0df9c90
--- /dev/null
+++ b/packages/nimble-components/src/select/testing/select.pageobject.ts
@@ -0,0 +1,186 @@
+import {
+ keyEnter,
+ keyEscape,
+ keyArrowDown,
+ keySpace
+} from '@microsoft/fast-web-utilities';
+import type { Select } from '..';
+import type { ListOption } from '../../list-option';
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { FilterMode } from '../types';
+
+/**
+ * Page object for the `nimble-select` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export class SelectPageObject {
+ public constructor(private readonly selectElement: Select) {}
+
+ public async openAndSetFilterText(filterText: string): Promise
{
+ if (this.selectElement.filterMode === FilterMode.none) {
+ throw new Error(
+ 'Can not set filter text with filterMode set to "none".'
+ );
+ }
+ await this.clickSelect();
+ const filterInput = this.getFilterInput();
+ if (filterInput) {
+ filterInput.value = filterText;
+ }
+
+ await waitForUpdatesAsync();
+ const inputEvent = new InputEvent('input');
+ filterInput?.dispatchEvent(inputEvent);
+ await waitForUpdatesAsync();
+ }
+
+ public async closeDropdown(): Promise {
+ this.selectElement.open = false;
+ await waitForUpdatesAsync();
+ }
+
+ public async setOptions(options: ListOption[]): Promise {
+ options.forEach(option => {
+ option.setAttribute('role', 'option');
+ });
+ this.selectElement.slottedOptions = options;
+ await waitForUpdatesAsync();
+ }
+
+ public getFilteredOptions(): ListOption[] {
+ return this.selectElement.filteredOptions as ListOption[];
+ }
+
+ public getSelectedOption(): ListOption | null {
+ return (this.selectElement.selectedOptions[0] as ListOption) ?? null;
+ }
+
+ /**
+ * Either opens or closes the dropdown depending on its current state
+ */
+ public async clickSelect(): Promise {
+ this.selectElement.dispatchEvent(new Event('click'));
+ await waitForUpdatesAsync();
+ }
+
+ public clickSelectedItem(): void {
+ if (!this.selectElement.open) {
+ throw new Error('Select must be open to click selectedItem');
+ }
+
+ this.clickOption(this.selectElement.selectedIndex);
+ }
+
+ public async clickFilterInput(): Promise {
+ if (!this.selectElement.filterInput) {
+ throw new Error('Filter input is not available.');
+ }
+ this.selectElement.filterInput.click();
+ await waitForUpdatesAsync();
+ }
+
+ public clickOption(index: number): void {
+ if (!this.selectElement.open) {
+ throw new Error('Select must be open to click selectedItem');
+ }
+
+ if (index >= this.selectElement.options.length) {
+ throw new Error(
+ '"index" greater than number of current displayed options'
+ );
+ }
+
+ const option = this.selectElement.options[index]!;
+ option.scrollIntoView();
+ const optionRect = option.getClientRects()[0]!;
+ const clickEvent = new MouseEvent('click', {
+ clientY: optionRect.y + optionRect.height / 2,
+ clientX: optionRect.width / 2,
+ bubbles: true
+ });
+ option.dispatchEvent(clickEvent);
+ }
+
+ public async clickAway(): Promise {
+ this.selectElement.dispatchEvent(new Event('focusout'));
+ await waitForUpdatesAsync();
+ }
+
+ public pressEnterKey(): void {
+ this.selectElement.dispatchEvent(
+ new KeyboardEvent('keydown', { key: keyEnter })
+ );
+ }
+
+ public pressEscapeKey(): void {
+ this.selectElement.dispatchEvent(
+ new KeyboardEvent('keydown', { key: keyEscape })
+ );
+ }
+
+ public pressArrowDownKey(): void {
+ this.selectElement.dispatchEvent(
+ new KeyboardEvent('keydown', { key: keyArrowDown })
+ );
+ }
+
+ public async pressSpaceKey(): Promise {
+ const alreadyOpen = this.selectElement.open;
+ this.selectElement.dispatchEvent(
+ new KeyboardEvent('keydown', { key: keySpace, bubbles: true })
+ );
+ await waitForUpdatesAsync();
+ if (
+ this.selectElement.filterMode === FilterMode.standard
+ && alreadyOpen
+ ) {
+ // add space to end of current filter
+ const filterValue = `${
+ this.selectElement.filterInput?.value ?? ''
+ } `;
+ if (this.selectElement.filterInput) {
+ this.selectElement.filterInput.value = filterValue;
+ }
+ this.selectElement.filterInput?.dispatchEvent(
+ new InputEvent('input', { inputType: 'insertText' })
+ );
+ }
+ await waitForUpdatesAsync();
+ }
+
+ public isDropdownVisible(): boolean {
+ return (
+ this.selectElement.shadowRoot?.querySelector('.listbox') !== null
+ );
+ }
+
+ public isFilterInputVisible(): boolean {
+ return (
+ this.selectElement.shadowRoot?.querySelector('.filter-field')
+ !== null
+ );
+ }
+
+ public isNoResultsLabelVisible(): boolean {
+ return (
+ this.selectElement.shadowRoot?.querySelector(
+ '.no-results-label'
+ ) !== null
+ );
+ }
+
+ public getFilterInputText(): string {
+ return this.getFilterInput()?.value ?? '';
+ }
+
+ private getFilterInput(): HTMLInputElement | null | undefined {
+ if (this.selectElement.filterMode === FilterMode.none) {
+ throw new Error(
+ 'Select has filterMode of "none" so there is no filter input'
+ );
+ }
+ return this.selectElement.shadowRoot?.querySelector(
+ '.filter-input'
+ );
+ }
+}
diff --git a/packages/nimble-components/src/select/tests/select-matrix.stories.ts b/packages/nimble-components/src/select/tests/select-matrix.stories.ts
index 05591ea89d..4b80bb4bb7 100644
--- a/packages/nimble-components/src/select/tests/select-matrix.stories.ts
+++ b/packages/nimble-components/src/select/tests/select-matrix.stories.ts
@@ -1,11 +1,9 @@
import type { StoryFn, Meta } from '@storybook/html';
import { html, ViewTemplate } from '@microsoft/fast-element';
import { pascalCase } from '@microsoft/fast-web-utilities';
+import { createStory } from '../../utilities/tests/storybook';
import {
createMatrixThemeStory,
- createStory
-} from '../../utilities/tests/storybook';
-import {
createMatrix,
sharedMatrixParameters
} from '../../utilities/tests/matrix';
diff --git a/packages/nimble-components/src/select/tests/select-opened-matrix.stories.ts b/packages/nimble-components/src/select/tests/select-opened-matrix.stories.ts
index c3a9394633..dd5661b6c4 100644
--- a/packages/nimble-components/src/select/tests/select-opened-matrix.stories.ts
+++ b/packages/nimble-components/src/select/tests/select-opened-matrix.stories.ts
@@ -3,8 +3,9 @@ import { html, ViewTemplate } from '@microsoft/fast-element';
import { createFixedThemeStory } from '../../utilities/tests/storybook';
import { sharedMatrixParameters } from '../../utilities/tests/matrix';
import { backgroundStates } from '../../utilities/tests/states';
-import { selectTag } from '..';
+import { Select, selectTag } from '..';
import { listOptionTag } from '../../list-option';
+import { FilterMode } from '../types';
const metadata: Meta = {
title: 'Tests/Select',
@@ -17,16 +18,19 @@ export default metadata;
const positionStates = [
['below', 'margin-bottom: 120px;'],
- ['above', 'margin-top: 120px;']
+ ['above', 'margin-top: 180px;']
] as const;
type PositionState = (typeof positionStates)[number];
+const filterModeStates = Object.values(FilterMode);
+type FilterModeState = (typeof filterModeStates)[number];
+
// prettier-ignore
-const component = ([
- position,
- positionStyle
-]: PositionState): ViewTemplate => html`
- <${selectTag} open position="${() => position}" style="${() => positionStyle}">
+const component = (
+ [position, positionStyle]: PositionState,
+ filterMode: FilterModeState
+): ViewTemplate => html`
+ <${selectTag} open position="${() => position}" style="${() => positionStyle}" filter-mode="${() => filterMode}">
<${listOptionTag} value="1">Option 1
<${listOptionTag} value="2" disabled>Option 2
<${listOptionTag} value="3">Option 3
@@ -45,29 +49,109 @@ if (remaining.length > 0) {
throw new Error('New backgrounds need to be supported');
}
-export const selectBelowOpenLightThemeWhiteBackground: StoryFn = createFixedThemeStory(
- component(positionStates[0]),
+export const selectBelowOpenNoFilterLightThemeWhiteBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[0], FilterMode.none),
+ lightThemeWhiteBackground
+);
+
+export const selectBelowOpenStandardFilterLightThemeWhiteBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[0], FilterMode.standard),
+ lightThemeWhiteBackground
+);
+
+export const selectAboveOpenNoFilterLightThemeWhiteBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[1], FilterMode.none),
lightThemeWhiteBackground
);
-export const selectAboveOpenLightThemeWhiteBackground: StoryFn = createFixedThemeStory(
- component(positionStates[1]),
+
+export const selectAboveOpenStandardFilterLightThemeWhiteBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[1], FilterMode.standard),
lightThemeWhiteBackground
);
-export const selectBelowOpenColorThemeDarkGreenBackground: StoryFn = createFixedThemeStory(
- component(positionStates[0]),
+export const selectBelowOpenColorNoFilterThemeDarkGreenBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[0], FilterMode.none),
+ colorThemeDarkGreenBackground
+);
+
+export const selectBelowOpenColorStandardFilterThemeDarkGreenBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[0], FilterMode.standard),
+ colorThemeDarkGreenBackground
+);
+
+export const selectAboveOpenNoFilterColorThemeDarkGreenBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[1], FilterMode.none),
colorThemeDarkGreenBackground
);
-export const selectAboveOpenColorThemeDarkGreenBackground: StoryFn = createFixedThemeStory(
- component(positionStates[1]),
+
+export const selectAboveOpenStandardFilterColorThemeDarkGreenBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[1], FilterMode.standard),
colorThemeDarkGreenBackground
);
-export const selectBelowOpenDarkThemeBlackBackground: StoryFn = createFixedThemeStory(
- component(positionStates[0]),
+export const selectBelowOpenNoFilterDarkThemeBlackBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[0], FilterMode.none),
+ darkThemeBlackBackground
+);
+
+export const selectBelowOpenStandardFilterDarkThemeBlackBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[0], FilterMode.standard),
+ darkThemeBlackBackground
+);
+
+export const selectAboveOpenNoFilterDarkThemeBlackBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[1], FilterMode.none),
+ darkThemeBlackBackground
+);
+
+export const selectAboveOpenStandardFilterDarkThemeBlackBackground: StoryFn = createFixedThemeStory(
+ component(positionStates[1], FilterMode.standard),
darkThemeBlackBackground
);
-export const selectAboveOpenDarkThemeBlackBackground: StoryFn = createFixedThemeStory(
- component(positionStates[1]),
+
+const noMatchesFilterPlayFunction = (): void => {
+ const select = document.querySelector