diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index e11c9d19bc6e7..909ce81745ac1 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 70184de809ce0..17c963580a8c2 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')