feat: swizzle search component to modify the version labels reliably

Author: Piotr1215

docs/index.mdx

@@ -19,11 +19,9 @@ export const InlineSearch = () => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedQuery, setDebouncedQuery] = useState('');
-  const [isIframeReady, setIsIframeReady] = useState(false);
   const inputRef = useRef(null);
   const iframeRef = useRef(null);
   const debounceTimerRef = useRef(null);
-  const dropdownSelections = useRef({});
 
   // Detect Mac for keyboard shortcut hint
   const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
@@ -48,8 +46,6 @@ export const InlineSearch = () => {
         e.preventDefault();
         setIsExpanded(false);
         setSearchQuery('');
-        setIsIframeReady(false);
-        dropdownSelections.current = {};
       }
     };
 
@@ -88,7 +84,7 @@ export const InlineSearch = () => {
       const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
       if (!iframeDoc) return;
 
-      // Inject CSS to hide elements - must be very aggressive
+      // Inject CSS to hide elements
       const style = iframeDoc.createElement('style');
       style.textContent = `
         /* Hide announcement bar */
@@ -126,7 +122,7 @@ export const InlineSearch = () => {
           visibility: hidden !important;
         }
 
-        /* Hide the search input box in iframe - all variations */
+        /* Hide the search input box in iframe */
         .ais-SearchBox,
         .ais-SearchBox-form,
         .ais-SearchBox-input,
@@ -170,7 +166,7 @@ export const InlineSearch = () => {
 
       iframeDoc.addEventListener('click', handleLinkClick, true);
 
-      // Also observe for dynamically added links
+      // Observe for dynamically added links
       const linkObserver = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
           mutation.addedNodes.forEach((node) => {
@@ -189,96 +185,8 @@ export const InlineSearch = () => {
         childList: true,
         subtree: true
       });
-
-      // Initialize and restore dropdown selections before showing iframe
-      const initializeDropdowns = () => {
-        const selects = iframeDoc.querySelectorAll('select');
-
-        // Check if we have selects with options
-        let hasValidSelects = false;
-        selects.forEach((select) => {
-          if (select.options && select.options.length > 0) {
-            hasValidSelects = true;
-          }
-        });
-
-        if (!hasValidSelects) {
-          return false; // Not ready yet
-        }
-
-        // Set dropdowns to saved values or default to "Stable"
-        selects.forEach((select, idx) => {
-          if (!select.options) return;
-
-          // Get the select element's identifier (use index or name/id if available)
-          const selectId = select.name || select.id || `select-${idx}`;
-
-          // If we have a saved value, restore it
-          if (dropdownSelections.current[selectId]) {
-            const savedValue = dropdownSelections.current[selectId];
-            select.value = savedValue;
-            // Update selectedIndex to match
-            for (let i = 0; i < select.options.length; i++) {
-              if (select.options[i].value === savedValue) {
-                select.selectedIndex = i;
-                break;
-              }
-            }
-          } else {
-            // First time: find and set to "Stable"
-            for (let i = 0; i < select.options.length; i++) {
-              const option = select.options[i];
-              const label = option.getAttribute('label') || option.text;
-
-              if (label.includes('Stable')) {
-                select.value = option.value;
-                select.selectedIndex = i;
-                dropdownSelections.current[selectId] = option.value;
-                break;
-              }
-            }
-          }
-
-          // Trigger events to ensure Algolia picks up the change
-          select.dispatchEvent(new Event('change', { bubbles: true }));
-          select.dispatchEvent(new Event('input', { bubbles: true }));
-
-          const form = select.closest('form');
-          if (form) {
-            form.dispatchEvent(new Event('change', { bubbles: true }));
-          }
-
-          // Listen for user changes to this dropdown
-          select.addEventListener('change', () => {
-            dropdownSelections.current[selectId] = select.value;
-          });
-        });
-
-        return true; // Successfully initialized
-      };
-
-      // Wait for dropdowns to initialize before showing iframe
-      if (initializeDropdowns()) {
-        // Dropdowns initialized successfully, show iframe
-        setIsIframeReady(true);
-      } else {
-        // Watch for select elements to appear
-        const selectObserver = new MutationObserver(() => {
-          if (initializeDropdowns()) {
-            setIsIframeReady(true);
-            selectObserver.disconnect();
-          }
-        });
-
-        selectObserver.observe(iframeDoc.body, {
-          childList: true,
-          subtree: true
-        });
-      }
     } catch (e) {
       console.error('Cannot inject styles into iframe:', e);
-      // Show iframe anyway even if injection failed
-      setIsIframeReady(true);
     }
   };
 
@@ -351,8 +259,6 @@ export const InlineSearch = () => {
               onClick={() => {
                 setIsExpanded(false);
                 setSearchQuery('');
-                setIsIframeReady(false);
-                dropdownSelections.current = {};
               }}
               style={{
                 background: 'transparent',
@@ -384,27 +290,6 @@ export const InlineSearch = () => {
             position: 'relative'
           }}
         >
-          {/* Loading indicator while iframe initializes */}
-          {!isIframeReady && (
-            <div
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: 'white',
-                zIndex: 10
-              }}
-            >
-              <div style={{ color: 'var(--ifm-color-content-secondary)' }}>
-                Loading search...
-              </div>
-            </div>
-          )}
           <iframe
             ref={iframeRef}
             src={iframeSrc}
@@ -413,10 +298,7 @@ export const InlineSearch = () => {
             style={{
               width: '100%',
               height: '100%',
-              border: 'none',
-              visibility: isIframeReady ? 'visible' : 'hidden',
-              opacity: isIframeReady ? 1 : 0,
-              transition: 'opacity 0.2s ease'
+              border: 'none'
             }}
             title="Search Documentation"
           />