Skip to content

feat: Focus stays in the input on opening select or multiselect with filter input #543

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

Merged
merged 1 commit into from
Dec 6, 2022
Merged

feat: Focus stays in the input on opening select or multiselect with filter input #543

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
28 changes: 25 additions & 3 deletions src/multiselect/__integ__/multiselect.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,11 @@ describe(`Multiselect with group selection`, () => {
'group selection selects all enabled child options',
setupTest(async page => {
await page.clickSelect();
await page.keys(['ArrowUp']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['Enter']);
await expect(page.getSelectedOptionLabels()).resolves.toEqual([
'Second category',
Expand All @@ -246,7 +250,11 @@ describe(`Multiselect with group selection`, () => {
'group selection deselects all enabled child options on double press',
setupTest(async page => {
await page.clickSelect();
await page.keys(['ArrowUp']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['Enter']);
await page.keys(['Enter']);

Expand All @@ -258,7 +266,11 @@ describe(`Multiselect with group selection`, () => {
'deselecting an element removes the parent from the selected options labels',
setupTest(async page => {
await page.clickSelect();
await page.keys(['ArrowUp']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['Enter']);
await page.keys(['ArrowDown']);
await page.keys(['Enter']);
Expand All @@ -272,6 +284,12 @@ describe(`Multiselect with group selection`, () => {
await page.clickSelect();
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['Enter']);
await expect(page.getSelectedOptionLabels()).resolves.toEqual([
'Second category',
Expand Down Expand Up @@ -300,9 +318,13 @@ describe(`Multiselect with group selection`, () => {
await page.clickSelect();
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['Enter']);
await page.keys(['4']);
await page.keys(['ArrowDown']);
await page.keys(['ArrowDown']);
await page.keys(['Enter']);
await expect(page.getSelectedOptionLabels()).resolves.toEqual([]);
await expect(page.getTokenLabels()).resolves.toEqual(['option5', 'option6']);
Expand Down
28 changes: 28 additions & 0 deletions src/select/__tests__/use-select.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,34 @@ describe('useSelect', () => {
expect(updateSelectedOption).not.toHaveBeenCalled();
});

test('select without filter should open and navigate to selected option', () => {
const hook = renderHook(useSelect, {
initialProps: { ...initialProps, filteringType: 'none', selectedOptions: [{ value: 'child1' }] },
});
const { getTriggerProps } = hook.result.current;
const triggerProps = getTriggerProps();
act(() => triggerProps.onKeyDown && triggerProps.onKeyDown(createTestEvent(KeyCode.space)));
expect(hook.result.current.isOpen).toBe(true);
expect(hook.result.current.highlightedOption).toEqual({
type: 'child',
option: {
label: 'Child 1',
value: 'child1',
},
});
});

test('select with filter should open and NOT navigate to selected option', () => {
const hook = renderHook(useSelect, {
initialProps: { ...initialProps, selectedOptions: [{ value: 'child1' }] },
});
const { getTriggerProps } = hook.result.current;
const triggerProps = getTriggerProps();
act(() => triggerProps.onKeyDown && triggerProps.onKeyDown(createTestEvent(KeyCode.space)));
expect(hook.result.current.isOpen).toBe(true);
expect(hook.result.current.highlightedOption).toBeFalsy();
});

describe('calculates if the highlighted option is selected', () => {
test('highlighted option is selected', () => {
const hook = renderHook(useSelect, {
Expand Down
7 changes: 4 additions & 3 deletions src/select/utils/use-select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,11 +249,12 @@ export function useSelect({

const prevOpen = usePrevious<boolean>(isOpen);
useEffect(() => {
// highlight the first selected option, when opening the Select component
if (isOpen && !prevOpen && hasSelectedOption) {
// highlight the first selected option, when opening the Select component without filter input
// keep the focus in the filter input when opening, so that screenreader can recognize the combobox
if (isOpen && !prevOpen && hasSelectedOption && !hasFilter) {
setHighlightedIndexWithMouse(options.indexOf(__selectedOptions[0]));
}
}, [isOpen, __selectedOptions, hasSelectedOption, setHighlightedIndexWithMouse, options, prevOpen]);
}, [isOpen, __selectedOptions, hasSelectedOption, setHighlightedIndexWithMouse, options, prevOpen, hasFilter]);

useEffect(() => {
if (isOpen) {
Expand Down