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.

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

core: refacto combo box #779

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

core: refacto combo box #779

wants to merge 5 commits into from

Conversation

clarani
Copy link
Contributor

@clarani clarani commented Dec 23, 2024

closes #778

Here are the main changes:

  • the combo box takes now a value of type T and not a string anymore
  • the combo box has a default behavior (filters on the labels) but a custom behaviour can be used
  • the hook useOutsideClick replaces the previous handleParentDivBlur function
  • a new story has been added to test the custom behavior

@clarani clarani requested a review from a team as a code owner December 23, 2024 10:15
@clarani clarani requested a review from emersion December 23, 2024 10:15
Here are the main changes:
- the combo box takes now a value of type T and not a string anymore
- the combo box has a default behavior (filters on the labels) but a custom behaviour can be used
- the hook useOutsideClick replaces the previous handleParentDivBlur function
- a new story has been added to test the custom behavior

Signed-off-by: Clara Ni <[email protected]>
@clarani clarani force-pushed the cni/778-refacto-combo-box branch from 0c50296 to 3ebcc5e Compare December 23, 2024 10:20
if (userInput.trim() === '') {
setFilteredSuggestions([]);
setSelectedOption(null);
const filterSuggestions = useCallback((input: string) => {
Copy link
Member

Choose a reason for hiding this comment

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

Can't we use useMemo() here instead of these useEffect() calls?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done ✅

disableDefaultFilter?: boolean;
getSuggestionLabel: (option: T) => string;
onSelectSuggestion: (option: T | undefined) => void;
customOnInputChange?: (inputValue: string) => void;
Copy link
Member

@emersion emersion Dec 23, 2024

Choose a reason for hiding this comment

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

This feels a bit awkward when there is already an onChange prop that users can set if they need to react to text input changes…

It seems like in OSRD we want to pre-filter suggestions before we pass them to the combobox?

Alternative proposals:

  • A filterSuggestions: boolean prop to enable/disable the combobox built-in filtering.
  • A filterSuggestions: (suggestions: T[], query: string) => T[] prop to tweak the combobox built-in filtering. Can be set to (suggestions, query) => suggestions to disable filtering. Supersedes exactSearch.

});
setFilteredSuggestions(filtered);
}, []);

// behaviors
Copy link
Member

Choose a reason for hiding this comment

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

Nit: "behavior" is uncountable in this context

@clarani clarani force-pushed the cni/778-refacto-combo-box branch from 50eb6ab to 063a491 Compare January 3, 2025 17:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Refacto combo box
2 participants