fix(menu): prevents defaultFocusedValue from focusing items on trig…

…ger click (#660)
zendeskgarden · Sep 12, 2024 · ec77a9d · ec77a9d
1 parent 482fbf0
commit ec77a9d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/menu/src/MenuContainer.spec.tsx b/packages/menu/src/MenuContainer.spec.tsx
@@ -280,6 +280,20 @@ describe('MenuContainer', () => {
  expect(firstItem).toHaveFocus();
  });
 
+ it('does not focus default value on click', async () => {
+ const { getByTestId, getByText } = render(
+ <TestMenu items={ITEMS} defaultFocusedValue="plant-04" />
+ );
+ const trigger = getByTestId('trigger');
+ const item = getByText('Succulent');
+
+ await act(async () => {
+ await user.click(trigger);
+ });
+
+ expect(item).not.toHaveFocus();
+ });
+
  it('focuses defaultFocusedValue on ArrowDown keydown', async () => {
  const { getByText, getByTestId } = render(
  <TestMenu items={ITEMS} defaultFocusedValue="plant-04" />

diff --git a/packages/menu/src/useMenu.ts b/packages/menu/src/useMenu.ts
@@ -97,7 +97,7 @@ export const useMenu = <T extends HTMLElement = HTMLElement, M extends HTMLEleme
  const focusTriggerRef = useRef<boolean>(false);
 
  const [state, dispatch] = useReducer(stateReducer, {
- focusedValue: focusedValue || defaultFocusedValue,
+ focusedValue,
  isExpanded: isExpanded || defaultExpanded,
  selectedItems: initialSelectedItems,
  valuesRef: values,