[base-ui][useSelect] Fix non-native button triggers (mui#40643)

mnajdova · Jan 22, 2024 · 27cbef2 · 27cbef2
1 parent fe60ad8
commit 27cbef2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/packages/mui-base/src/Select/Select.test.tsx b/packages/mui-base/src/Select/Select.test.tsx
@@ -117,18 +117,21 @@ describe('<Select />', () => {
   });
 
   describe('keyboard navigation', () => {
-    ['Enter', 'ArrowDown', 'ArrowUp', ' '].forEach((key) => {
-      it(`opens the dropdown when the "${key}" key is down on the button`, async () => {
-        const { getByRole } = await render(<Select />);
-        const select = getByRole('combobox');
-        act(() => {
-          select.focus();
-        });
+    [<Select />, <Select slots={{ root: 'span' }} />].forEach((selectComponent) => {
+      const triggerType = selectComponent.props.slots?.root ? 'non-native' : 'native';
+      ['Enter', 'ArrowDown', 'ArrowUp', ' '].forEach((key) => {
+        it(`opens the dropdown when the "${key}" key is pressed on a ${triggerType} button trigger`, async () => {
+          const { getByRole } = await render(selectComponent);
+          const select = getByRole('combobox');
+          act(() => {
+            select.focus();
+          });
 
-        await userEvent.keyboard(`{${key}}`);
+          await userEvent.keyboard(`{${key}}`);
 
-        expect(select).to.have.attribute('aria-expanded', 'true');
-        expect(getByRole('listbox')).not.to.equal(null);
+          expect(select).to.have.attribute('aria-expanded', 'true');
+          expect(getByRole('listbox')).not.to.equal(null);
+        });
       });
     });
 

diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
@@ -378,7 +378,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     externalProps: ExternalProps = {} as ExternalProps,
   ): UseSelectButtonSlotProps<ExternalProps> => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    const combinedProps = combineHooksSlotProps(getButtonRootProps, getSelectTriggerProps);
+    const combinedProps = combineHooksSlotProps(getSelectTriggerProps, getButtonRootProps);
 
     return {
       ...externalProps,