Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Dropdown): Freeform search should be case insensitive #24879

Merged
merged 4 commits into from
Oct 24, 2022
Merged

feat(Dropdown): Freeform search should be case insensitive #24879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e9e8104
feat(Dropdown): Freeform search should be case insensitive
Sep 21, 2022
50454b1
fix problem with last letter
Sep 30, 2022
ee7dd2b
Merge remote-tracking branch 'upstream/master' into v0-dropdown-freef…
Oct 24, 2022
55309a9
changelog
Oct 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/fluentui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
19 changes: 15 additions & 4 deletions packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Expand Down