fix: Disables select native search when read-only (#3385)

Author: pan-kot

pages/select/select.test.page.tsx

@@ -155,6 +155,19 @@ export default function SelectPage() {
               }}
             />
           </Box>
+          <Box padding="s">
+            <Box variant="h1">Read-only select</Box>
+            <Select
+              id="select_native_search_readonly"
+              readOnly={true}
+              options={options}
+              selectedOption={selectedOption1}
+              placeholder="Choose option"
+              onChange={(e: any) => {
+                setSelectedOption1(e.detail.selectedOption);
+              }}
+            />
+          </Box>
         </Box>
       </ScreenshotArea>
     </article>

src/select/__integ__/select-native-search.test.ts

@@ -136,7 +136,7 @@ describe(`Select (Native Search)`, () => {
     );
 
     test(
-      'selects the match with dropdown closed -- extended option with missing properties, searches entire option',
+      'selects the match with dropdown closed -- extended option with missing properties, searches entire option - "ano"',
       setupTest(optionsType, async page => {
         await page.focusSelect();
         await page.keys(['a', 'n', 'o']);
@@ -154,12 +154,28 @@ describe(`Select (Native Search)`, () => {
     );
 
     test(
-      'selects the match with dropdown closed -- extended option with missing properties, searches entire option',
+      'selects the match with dropdown closed -- extended option with missing properties, searches entire option - "third"',
       setupTest(optionsType, async page => {
         await page.focusSelect();
         await page.keys(['t', 'h', 'i', 'r', 'd']);
         await expect(page.getTriggerLabel()).resolves.toMatch('Third thing');
       })
     );
   });
+
+  describe('Options - Read-only', () => {
+    test('cannot use native search on read-only select', async () => {
+      await setupTest('simple', async page => {
+        await page.focusSelect();
+        await page.keys(['o']);
+        await expect(page.getTriggerLabel()).resolves.toBe('Option 1');
+      })();
+
+      await setupTest('readonly', async page => {
+        await page.focusSelect();
+        await page.keys(['o']);
+        await expect(page.getTriggerLabel()).resolves.toBe('Choose option');
+      })();
+    });
+  });
 });

src/select/internal.tsx

@@ -138,7 +138,7 @@ const InternalSelect = React.forwardRef(
     });
 
     const handleNativeSearch = useNativeSearch({
-      isEnabled: filteringType === 'none',
+      isEnabled: filteringType === 'none' && !readOnly,
       options: filteredOptions,
       highlightOption: !isOpen ? selectOption : highlightOption,
       highlightedOption: !isOpen ? selectedOption : highlightedOption?.option,