[select] Block opening the popup when provided readOnly (#2717)

Author: seongminn

packages/react/src/select/root/SelectRoot.test.tsx

@@ -806,6 +806,78 @@ describe('<Select.Root />', () => {
     });
   });
 
+  describe('prop: readOnly', () => {
+    it('sets the readOnly state', async () => {
+      const handleOpenChange = spy();
+      const { user } = await render(
+        <Select.Root defaultValue="b" onOpenChange={handleOpenChange} readOnly>
+          <Select.Trigger>
+            <Select.Value />
+          </Select.Trigger>
+        </Select.Root>,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).to.have.attribute('aria-readonly', 'true');
+      expect(trigger).to.have.attribute('data-readonly');
+
+      await user.keyboard('[Tab]');
+      expect(trigger).toHaveFocus();
+
+      await user.click(trigger);
+      expect(handleOpenChange.callCount).to.equal(0);
+    });
+
+    it('should not open the select when clicked', async () => {
+      const handleOpenChange = spy();
+      const { user } = await render(
+        <Select.Root onOpenChange={handleOpenChange} readOnly>
+          <Select.Trigger>
+            <Select.Value />
+          </Select.Trigger>
+        </Select.Root>,
+      );
+
+      const trigger = screen.getByRole('combobox');
+
+      await user.click(trigger);
+      expect(screen.queryByRole('listbox')).to.equal(null);
+      expect(handleOpenChange.callCount).to.equal(0);
+    });
+
+    it('should not open the select when using keyboard', async () => {
+      const handleOpenChange = spy();
+      const { user } = await render(
+        <Select.Root onOpenChange={handleOpenChange} readOnly>
+          <Select.Trigger>
+            <Select.Value />
+          </Select.Trigger>
+        </Select.Root>,
+      );
+
+      const trigger = screen.getByRole('combobox');
+
+      await act(async () => {
+        trigger.focus();
+      });
+
+      expect(screen.queryByRole('listbox')).to.equal(null);
+      expect(document.activeElement).to.equal(trigger);
+
+      await user.keyboard('[ArrowDown]');
+      expect(screen.queryByRole('listbox')).to.equal(null);
+      expect(handleOpenChange.callCount).to.equal(0);
+
+      await user.keyboard('[Enter]');
+      expect(screen.queryByRole('listbox')).to.equal(null);
+      expect(handleOpenChange.callCount).to.equal(0);
+
+      await user.keyboard('[Space]');
+      expect(screen.queryByRole('listbox')).to.equal(null);
+      expect(handleOpenChange.callCount).to.equal(0);
+    });
+  });
+
   describe('prop: id', () => {
     it('sets the id on the hidden input', async () => {
       const { container } = await render(

packages/react/src/select/trigger/SelectTrigger.tsx

@@ -159,12 +159,8 @@ export const SelectTrigger = React.forwardRef(function SelectTrigger(
       onPointerDown({ pointerType }) {
         store.set('touchModality', pointerType === 'touch');
       },
-      onKeyDown(event) {
+      onKeyDown() {
         keyboardActiveRef.current = true;
-
-        if (event.key === 'ArrowDown') {
-          setOpen(true, createBaseUIEventDetails('list-navigation', event.nativeEvent));
-        }
       },
       onMouseDown(event) {
         if (open) {