From 27cbef209388a3712f7f1532333f1ef97cad0ec5 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Mon, 22 Jan 2024 08:14:04 -0300
Subject: [PATCH] [base-ui][useSelect] Fix non-native button triggers (#40643)

---
 packages/mui-base/src/Select/Select.test.tsx | 23 +++++++++++---------
 packages/mui-base/src/useSelect/useSelect.ts |  2 +-
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/mui-base/src/Select/Select.test.tsx b/packages/mui-base/src/Select/Select.test.tsx
index 345bc97ac62c3f..fee6832086d679 100644
--- 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
index 2997e91244a704..984b93e32922b0 100644
--- 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,