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 <[email protected]>
microsoft · Oct 24, 2022 · 9dd5a3b · 9dd5a3b
1 parent d6837b7
commit 9dd5a3b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -906,9 +906,14 @@ export const Dropdown = (React.forwardRef<HTMLDivElement, DropdownProps>((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<HTMLDivElement, DropdownProps>((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<HTMLDivElement, DropdownProps>((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<HTMLDivElement, DropdownProps>((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')