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

Jump to bottom

fix(combobox): clean up classes and add tests #263

Merged
merged 10 commits into from
Jul 24, 2024
Merged

fix(combobox): clean up classes and add tests #263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c14c009
fix(combobox): add unit-tests
felicia-haggqvist Jul 16, 2024
2e54955
fix(combobox): add more tests
felicia-haggqvist Jul 17, 2024
8824a2d
fix(combobox): add more tests
felicia-haggqvist Jul 18, 2024
54103cb
fix(combobox): refactor tests
felicia-haggqvist Jul 18, 2024
ac27b50
fix(combobox): fix lint warning and remove redundant async in tests
felicia-haggqvist Jul 18, 2024
09f7a9b
fix(combobox): move option classes to a function and rename classes
felicia-haggqvist Jul 18, 2024
75d33ae
fix(combobox): set option to type of OptionWithIdAndMatch in optionCl…
felicia-haggqvist Jul 18, 2024
8bf708f
fix(combobox): fix linting issue and rename a test
felicia-haggqvist Jul 19, 2024
ba66bea
Merge branch 'component-classes-cleanup' into fix/add-tests-combo-box
felicia-haggqvist Jul 24, 2024
b11ae32
fix: update to latest of css component-classes-cleanup
felicia-haggqvist Jul 24, 2024
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
16 changes: 10 additions & 6 deletions packages/combobox/src/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,13 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(({ id: pid,

const navigationValueOrInputValue = navigationOption?.value || value;

const optionClasses = (option: OptionWithIdAndMatch) =>
classNames(
ccCombobox.option,
OPTION_CLASS_NAME,
navigationOption?.id === option?.id ? ccCombobox.optionSelected : ccCombobox.optionUnselected,
);

// Set and filter available options based on user input
useEffect(() => {
setCurrentOptions(
Expand All @@ -81,7 +88,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(({ id: pid,
);

// eslint-disable-next-line
}, [options, disableStaticFiltering]);
}, [options, disableStaticFiltering, value]);

useEffect(() => {
if (disableStaticFiltering && currentOptions.length && currentOptions.length === 1 && !currentOptions.some((o) => o.value === value)) {
Expand Down Expand Up @@ -239,7 +246,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(({ id: pid,

<div
hidden={!isOpen || !currentOptions.length}
className={classNames(listClassName, ccCombobox.combobox)}
className={classNames(listClassName, ccCombobox.base)}
style={{
zIndex: 3, // Force popover above misc. page content (mobile safari issue)
}}>
Expand Down Expand Up @@ -286,10 +293,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(({ id: pid,
handleSelect(option);
});
}}
className={classNames({
[`${ccCombobox.option} ${OPTION_CLASS_NAME}`]: true,
[ccCombobox.optionSelected]: navigationOption?.id === option.id,
})}>
className={optionClasses(option)}>
{matchTextSegments || highlightValueMatch ? match : display}
</li>
);
Expand Down
Loading
Loading