fix(react): fix listbox focus issue when listbox options have changed (…

…#1777)
dequelabs · Dec 20, 2024 · 55d370c · 55d370c
1 parent 0a00d24
commit 55d370c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/packages/react/src/components/Listbox/Listbox.tsx b/packages/react/src/components/Listbox/Listbox.tsx
@@ -247,7 +247,10 @@ const Listbox = forwardRef<
 
     const handleFocus = useCallback(
       (event: React.FocusEvent<HTMLElement>) => {
-        if (!activeOption) {
+        if (
+          !activeOption ||
+          !options.some((option) => option.element === activeOption.element)
+        ) {
           const firstOption = options.find(
             (option) => !isDisabledOption(option)
           );

diff --git a/packages/react/src/components/Listbox/index.test.tsx b/packages/react/src/components/Listbox/index.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import Listbox from './';
 import { ListboxGroup, ListboxOption } from './';
 import axe from '../../axe';
@@ -202,7 +202,7 @@ test('should set the first non-disabled option as active on focus', () => {
     </Listbox>
   );
 
-  fireEvent.focus(screen.getByRole('option', { name: 'Banana' }));
+  fireEvent.focus(screen.getByRole('listbox'));
   expect(screen.getByRole('option', { name: 'Banana' })).toHaveClass(
     'ListboxOption--active'
   );
@@ -212,6 +212,42 @@ test('should set the first non-disabled option as active on focus', () => {
   );
 });
 
+test('should set the first non-disabled option as active on focus when the options have changed', () => {
+  const { rerender } = render(
+    <Listbox>
+      <ListboxOption disabled>Apple</ListboxOption>
+      <ListboxOption>Banana</ListboxOption>
+      <ListboxOption>Cantaloupe</ListboxOption>
+    </Listbox>
+  );
+
+  waitFor(() => {
+    fireEvent.focus(screen.getByRole('listbox'));
+    expect(screen.getByRole('listbox')).toHaveFocus();
+  });
+
+  rerender(
+    <Listbox>
+      <ListboxOption disabled>Dragon Fruit</ListboxOption>
+      <ListboxOption>Elderberry</ListboxOption>
+      <ListboxOption>Fig</ListboxOption>
+    </Listbox>
+  );
+
+  waitFor(() => {
+    fireEvent.focus(screen.getByRole('listbox'));
+    expect(screen.getByRole('listbox')).toHaveFocus();
+  });
+
+  expect(screen.getByRole('option', { name: 'Elderberry' })).toHaveClass(
+    'ListboxOption--active'
+  );
+  expect(screen.getByRole('listbox')).toHaveAttribute(
+    'aria-activedescendant',
+    screen.getByRole('option', { name: 'Elderberry' }).getAttribute('id')
+  );
+});
+
 test('should set selected value with "value" prop when listbox option only has text label', () => {
   render(
     <Listbox value="Banana">