Skip to content
This repository has been archived by the owner on Feb 10, 2024. It is now read-only.

Fixed select-search-field #19

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed select-search-field #19

Show file tree
Hide file tree
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
4 changes: 3 additions & 1 deletion components/fields/select/SelectField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ export function SelectField (props: SelectFieldProps<any>) {
onChangeCallback,
onKeyDownCallback,
dropdownOpen,
buttonRefs
buttonRefs,
searchField
} = useSelectField<any>(
label,
props?.model?.key ?? '',
Expand Down Expand Up @@ -86,6 +87,7 @@ export function SelectField (props: SelectFieldProps<any>) {
onKeyDownCallback={onKeyDownCallback}
dropdownOpen={dropdownOpen}
buttonRefs={buttonRefs}
searchField={searchField}
/>
);

Expand Down
20 changes: 11 additions & 9 deletions hooks/field/useSelectField.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,6 @@ export function useSelectField<T> (
]
);

const updateSearchFieldCallback = useCallback(
() => {
if(searchField) setSearchField('')
},
[
searchField
]
)

const updateCurrentItemIndexCallback = useCallback(
() => {
setCurrentItemIndex(() => propsValue !== undefined ? findValueIndexCallback(propsValue) : undefined);
Expand Down Expand Up @@ -286,6 +277,17 @@ export function useSelectField<T> (
]
);

const updateSearchFieldCallback = useCallback(
() => {
if( searchField ) setSearchField('')
},
[
updateCurrentItemIndexCallback,
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do you set these as the dependency when they aren't used inside the callback?

Also why is there no dependency for searchField and setSearchField...

Also probably better would be to use setSearchField((value) => value ? value : '') -- that way you don't need the if clause or dependency for the current value, and it works asynchronously correctly (maybe).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This callback is only used to nullify the SearchField after user selects an item, so that full list of items can be seen afterwards.

Currently this is the only place where SearchField is emptied, if I set SearchField as dependency then the field nullifies itself everytime when someone starts typing, thus filtering doesn't work.

Ofcourse the Callback function itself is quite pointless in this case, the setSearchField could be called from functions that I use as dependency, but in that case the logic is spread around instead of getting called from one specific place.

currentItem,
updateCurrentItemFromFocusCallback
]
)

const onFocusCallback = useCallback(
() => {
if ( !dropdownOpen ) {
Expand Down