Refactor: Improve platform selector search and virtual guide stability

Co-authored-by: shannon.anahata <[email protected]>

Author: cursoragent

src/components/platformSelector/index.tsx

@@ -1,5 +1,5 @@
 'use client';
-import {Fragment, Ref, useEffect, useMemo, useRef, useState} from 'react';
+import {Fragment, Ref, startTransition, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {Combobox, ComboboxItem, ComboboxList, ComboboxProvider} from '@ariakit/react';
 import {CaretRightIcon, CaretSortIcon, MagnifyingGlassIcon} from '@radix-ui/react-icons';
 import * as RadixSelect from '@radix-ui/react-select';
@@ -63,25 +63,40 @@ export function PlatformSelector({
   const currentPlatformKey = currentPlatform?.key;
   const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState('');
+  
+  // Controlled search handler for virtual guide stability
+  const handleSearchValueChange = useCallback((value: string) => {
+    // Use startTransition for virtual guides to prevent focus issues
+    if (currentPlatformKey === 'javascript-platform') {
+      startTransition(() => setSearchValue(value));
+    } else {
+      setSearchValue(value);
+    }
+  }, [currentPlatformKey]);
 
   const matches = useMemo(() => {
     if (!searchValue) {
       return platformsAndGuides;
     }
+    
+    // Find the currently selected platform/guide first
+    const selectedPlatform = platformsAndGuides.find(
+      lang => lang.key === currentPlatformKey
+    );
+    
     // any of these fields can be used to match the search value
     const keys = ['title', 'name', 'aliases', 'sdk', 'keywords'];
-    const matches_ = matchSorter(platformsAndGuides, searchValue, {
+    let matches_ = matchSorter(platformsAndGuides, searchValue, {
       keys,
       threshold: matchSorter.rankings.ACRONYM,
     });
-    // Radix Select does not work if we don't render the selected item, so we
-    // make sure to include it in the list of matches.
-    const selectedPlatform = platformsAndGuides.find(
-      lang => lang.key === currentPlatformKey
-    );
+    
+    // For virtual guides (like javascript-platform), ensure they're always included
+    // when they're the current selection, to prevent focus/display issues
     if (selectedPlatform && !matches_.includes(selectedPlatform)) {
-      matches_.push(selectedPlatform);
+      matches_ = [selectedPlatform, ...matches_];
     }
+    
     return matches_;
   }, [searchValue, currentPlatformKey, platformsAndGuides]);
 
@@ -161,7 +176,7 @@ export function PlatformSelector({
           open={open}
           setOpen={setOpen}
           includesBaseElement={false}
-          setValue={setSearchValue}
+          setValue={handleSearchValueChange}
         >
           <RadixSelect.Trigger aria-label="Platform" className={styles.select}>
             <RadixSelect.Value placeholder="Choose your SDK" />

src/docTree.ts

@@ -377,6 +377,10 @@ function extractGuides(platformNode: DocNode): PlatformGuide[] {
     ? {
         ...nodeToGuide(platformNode.slug, platformNode),
         key: `${platformNode.slug}-platform`,
+        // Enhance searchable properties for virtual guides
+        title: platformNode.frontmatter.title || platformNode.frontmatter.platformTitle,
+        aliases: [...(platformNode.frontmatter.aliases || []), platformNode.slug],
+        keywords: [...(platformNode.frontmatter.keywords || []), 'browser', 'client'],
       }
     : undefined;