From e9e81049f92804bd54091e3a54364c7bd2171eb7 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Wed, 21 Sep 2022 08:31:20 +0200 Subject: [PATCH 1/3] feat(Dropdown): Freeform search should be case insensitive --- .../src/components/Dropdown/Dropdown.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 70ab574f0def0c..7aa76bec07c839 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -905,7 +905,9 @@ 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; } @@ -938,7 +940,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') @@ -1009,7 +1013,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') @@ -1038,7 +1044,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') From 50454b151463ee2aeaccfb231521e729493fc0a3 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Fri, 30 Sep 2022 11:36:34 +0200 Subject: [PATCH 2/3] fix problem with last letter --- .../react-northstar/src/components/Dropdown/Dropdown.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 7aa76bec07c839..dd9f83efc16dec 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -910,6 +910,9 @@ export const Dropdown = (React.forwardRef((props, ); 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; From 55309a9ecd9a3afeaf9ea36c5b33b48b07d0ea82 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 24 Oct 2022 14:00:49 +0200 Subject: [PATCH 3/3] changelog --- packages/fluentui/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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))