From 9dd5a3b5f20bb1a1fe2c4961c262201a691f460d Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 24 Oct 2022 14:26:21 +0200 Subject: [PATCH] feat(Dropdown): Freeform search should be case insensitive (#24879) * feat(Dropdown): Freeform search should be case insensitive * fix problem with last letter * changelog Co-authored-by: Juraj Kapsiar --- packages/fluentui/CHANGELOG.md | 1 + .../src/components/Dropdown/Dropdown.tsx | 19 +++++++++++++++---- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index e11c9d19bc6e7c..909ce81745ac12 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add `FocusTrapZone` prop `preventScrollOnRestoreFocus` to prevent scroll on focus when `FocusTrapZone` releases @yuanboxue-amber ([#24632](https://github.com/microsoft/fluentui/pull/24632)) - Add new style to v0 Tooltip to match v9 Tooltip @GianoglioEnrico ([#24908](https://github.com/microsoft/fluentui/pull/24908)) - Limit keyboard detection in inputs @jurokapsiar ([#25087](https://github.com/microsoft/fluentui/pull/25087)) +- Dropdown Freeform search should be case insensitive @jurokapsiar ([#24879](https://github.com/microsoft/fluentui/pull/24879)) ### Fixes - Allow React 17 in `peerDependencies` of all packages and bump react-is to 17 @TristanWatanabe ([#24356](https://github.com/microsoft/fluentui/pull/24356)) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 70184de809ce04..17c963580a8c23 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -906,9 +906,14 @@ export const Dropdown = (React.forwardRef((props, if (allowFreeform) { // set highlighted index to first item starting with search query - const itemIndex = items.findIndex(i => itemToString(i)?.startsWith(changes.inputValue)); + const itemIndex = items.findIndex(i => + itemToString(i)?.toLocaleLowerCase().startsWith(changes.inputValue?.toLowerCase()), + ); if (itemIndex !== -1) { newState.highlightedIndex = itemIndex; + // for free form always keep searchQuery and inputValue in sync + // as state change might not be called after last letter was entered + newState.searchQuery = changes.inputValue; } } else { newState.highlightedIndex = highlightFirstItemOnOpen ? 0 : null; @@ -939,7 +944,9 @@ export const Dropdown = (React.forwardRef((props, newState.searchQuery = getSelectedItemAsString(newValue); if (allowFreeform && !inListbox.current && type === Downshift.stateChangeTypes.keyDownEnter) { - const itemIndex = items.findIndex(i => itemToString(i)?.startsWith(searchQuery)); + const itemIndex = items.findIndex(i => + itemToString(i)?.toLocaleLowerCase().startsWith(searchQuery?.toLocaleLowerCase()), + ); // if there is an item that starts with searchQuery, still apply the search query // to do auto complete (you enter '12:', can be completed to '12:00') @@ -1010,7 +1017,9 @@ export const Dropdown = (React.forwardRef((props, if (open) { newState.open = false; if (allowFreeform) { - const itemIndex = items.findIndex(i => itemToString(i)?.startsWith(searchQuery)); + const itemIndex = items.findIndex(i => + itemToString(i)?.toLowerCase().startsWith(searchQuery?.toLowerCase()), + ); // if there is an item that starts with searchQuery, still apply the search query // to do auto complete (you enter '12:', can be completed to '12:00') @@ -1039,7 +1048,9 @@ export const Dropdown = (React.forwardRef((props, listRef.current.focus(); } } else if (allowFreeform) { - const itemIndex = items.findIndex(i => itemToString(i)?.startsWith(searchQuery)); + const itemIndex = items.findIndex(i => + itemToString(i)?.toLocaleLowerCase().startsWith(searchQuery.toLowerCase()), + ); // if there is an item that starts with searchQuery, still apply the search query // to do auto complete (you enter '12:', can be completed to '12:00')