fix: Escape in an open Combobox or Dropdown does not trigger tabster actions

Author: smhigley

packages/react-components/react-combobox/library/src/components/Combobox/Combobox.test.tsx

@@ -8,6 +8,7 @@ import { isConformant } from '../../testing/isConformant';
 import { resetIdsForTests } from '@fluentui/react-utilities';
 import { comboboxClassNames } from './useComboboxStyles.styles';
 import type { ComboboxProps } from '@fluentui/react-combobox';
+import { getTabsterAttribute } from 'tabster';
 
 describe('Combobox', () => {
   beforeEach(() => {
@@ -1026,6 +1027,41 @@ describe('Combobox', () => {
     expect(listbox.getAttribute('aria-labelledby')).toEqual(null);
   });
 
+  it('should update the tabster escape ignore attribute based on open state', () => {
+    const tabsterOpenAttr = getTabsterAttribute(
+      {
+        focusable: {
+          ignoreKeydown: { Escape: true },
+        },
+      },
+      true,
+    );
+    const tabsterClosedAttr = getTabsterAttribute(
+      {
+        focusable: {
+          ignoreKeydown: { Escape: false },
+        },
+      },
+      true,
+    );
+
+    const { getByRole } = render(
+      <Combobox>
+        <Option>Red</Option>
+        <Option>Green</Option>
+        <Option>Blue</Option>
+      </Combobox>,
+    );
+    const combobox = getByRole('combobox');
+
+    expect(combobox.getAttribute('data-tabster')).toMatch(tabsterClosedAttr);
+
+    // open
+    userEvent.click(getByRole('combobox'));
+
+    expect(combobox.getAttribute('data-tabster')).toMatch(tabsterOpenAttr);
+  });
+
   describe('clearable', () => {
     it('clears the selection on a button click', () => {
       const { getByText, getByRole } = render(

packages/react-components/react-combobox/library/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`Combobox renders a default state 1`] = `
     <input
       aria-expanded="false"
       class="fui-Combobox__input"
+      data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"Escape\\":false}}}"
       role="combobox"
       type="text"
       value=""
@@ -66,6 +67,7 @@ exports[`Combobox renders an open listbox 1`] = `
       aria-controls="fluent-listbox_r_j_"
       aria-expanded="true"
       class="fui-Combobox__input"
+      data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"Escape\\":true}}}"
       role="combobox"
       type="text"
       value=""

packages/react-components/react-combobox/library/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`Dropdown renders a default state 1`] = `
     <button
       aria-expanded="false"
       class="fui-Dropdown__button"
+      data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"Escape\\":false}}}"
       role="combobox"
       tabindex="0"
       type="button"
@@ -65,6 +66,7 @@ exports[`Dropdown renders an open listbox 1`] = `
       aria-controls="fluent-listbox_r_d_"
       aria-expanded="true"
       class="fui-Dropdown__button"
+      data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"Escape\\":true}}}"
       role="combobox"
       tabindex="0"
       type="button"

packages/react-components/react-combobox/library/src/utils/useTriggerSlot.ts

@@ -1,7 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { useSetKeyboardNavigation } from '@fluentui/react-tabster';
+import {
+  useSetKeyboardNavigation,
+  useTabsterAttributes,
+  useMergedTabsterAttributes_unstable,
+} from '@fluentui/react-tabster';
 import type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
 import { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';
@@ -48,12 +52,26 @@ export function useTriggerSlot(
     activeDescendantController,
   } = options;
 
+  // need to prevent tabster from also handling escape when the dropdown is open
+  // event.stopPropagation() isn't enough here, since tabster uses the capture phase
+  const ignoreEscapeKeyAttribute = useTabsterAttributes({
+    focusable: {
+      ignoreKeydown: { Escape: open },
+    },
+  });
+
+  const tabsterOverrides = useMergedTabsterAttributes_unstable(
+    ignoreEscapeKeyAttribute,
+    typeof defaultProps === 'object' ? defaultProps : {},
+  );
+
   const trigger = slot.always(triggerSlotFromProp, {
     defaultProps: {
       type: 'text',
       'aria-expanded': open,
       role: 'combobox',
       ...(typeof defaultProps === 'object' && defaultProps),
+      ...tabsterOverrides,
     },
     elementType,
   });