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

fix: #7527, Dropdown: Editable Dropdown search not working as expected #7528

Merged
merged 1 commit into from
Dec 26, 2024
Merged

fix: #7527, Dropdown: Editable Dropdown search not working as expected #7528

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 13 additions & 1 deletion components/lib/dropdown/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -588,12 +588,24 @@ export const Dropdown = React.memo(
return isOptionDisabled(option) ? findPrevOption(i) : option;
};

const findInArray = (visibleOptions, searchText) => {
if (!searchText || !visibleOptions?.length) return -1;

const normalizedSearch = searchText.toLocaleLowerCase();

const exactMatch = visibleOptions.findIndex((item) => getOptionLabel(item).toLocaleLowerCase() === normalizedSearch);

if (exactMatch !== -1) return exactMatch;

return visibleOptions.findIndex((item) => getOptionLabel(item).toLocaleLowerCase().startsWith(normalizedSearch));
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Won't this do it more efficientialy by only calling FindIndex 1 instead of passing over the whole array twice?

const search = (visibleOptions, searchText) => {
    if (!searchText || !visibleOptions?.length) return -1;

    const normalizedSearch = searchText.toLocaleLowerCase();

    return visibleOptions.findIndex((item) => {
        const label = getOptionLabel(item).toLocaleLowerCase();
        return label === normalizedSearch || label.startsWith(normalizedSearch);
    });
};

I would also call the method search instead of findInArray

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh no i see you want to search the whole list for an exact match before trying again with startswith

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, we will need to iterate the array twice in this case. Once to find the exact match and then to find matches with startsWith.


const onEditableInputChange = (event) => {
!overlayVisibleState && show();
let searchIndex = null;

if (event.target.value && visibleOptions) {
searchIndex = visibleOptions.findIndex((item) => getOptionLabel(item).toLocaleLowerCase().startsWith(event.target.value.toLocaleLowerCase()));
searchIndex = findInArray(visibleOptions, event.target.value);
}

setFocusedOptionIndex(searchIndex);
Expand Down
Loading