From 76d6d26b3afa8bd9b2eebc53ccf1394139b7ae6a Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 11 Jan 2023 19:30:08 +0200
Subject: [PATCH] docs: fix search bar not focused when using keyboard shortcut
 (#2999)

* docs: only render mobile search bar on mobile devices

* docs: prevent rendering desktop search bar on mobile devices
---
 www/docs/src/theme/DocSidebar/Desktop/index.js |  4 +++-
 www/docs/src/theme/Navbar/Content/index.js     | 12 +++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/www/docs/src/theme/DocSidebar/Desktop/index.js b/www/docs/src/theme/DocSidebar/Desktop/index.js
index 706b063cc4..c44558bc37 100644
--- a/www/docs/src/theme/DocSidebar/Desktop/index.js
+++ b/www/docs/src/theme/DocSidebar/Desktop/index.js
@@ -9,6 +9,7 @@ import DocSidebarItem from '@theme/DocSidebarItem';
 import SearchBar from '../../SearchBar';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import AnnouncementBar from '@theme/AnnouncementBar';
+import {useWindowSize} from '@docusaurus/theme-common';
 
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   const {
@@ -20,6 +21,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   } = useThemeConfig();
   const isBrowser = useIsBrowser()
   const sidebarRef = useRef(null)
+  const windowSize = useWindowSize();
 
   useEffect(() => {
     if (isBrowser && sidebarRef.current) {
@@ -55,7 +57,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
       ref={sidebarRef}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <div className={styles.sidebarSearchContainer}>
-        <SearchBar />
+        {windowSize !== 'mobile' && <SearchBar />}
       </div>
       <AnnouncementBar />
       <Content path={path} sidebar={sidebar} />
diff --git a/www/docs/src/theme/Navbar/Content/index.js b/www/docs/src/theme/Navbar/Content/index.js
index e1f7e97773..a7be508d76 100644
--- a/www/docs/src/theme/Navbar/Content/index.js
+++ b/www/docs/src/theme/Navbar/Content/index.js
@@ -11,6 +11,8 @@ import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarLogo from '@theme/Navbar/Logo';
 import NavbarSearch from '@theme/Navbar/Search';
 import styles from './styles.module.css';
+import {useWindowSize} from '@docusaurus/theme-common';
+
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
   return useThemeConfig().navbar.items;
@@ -36,6 +38,8 @@ export default function NavbarContent() {
   const mobileSidebar = useNavbarMobileSidebar();
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
+  const windowSize = useWindowSize();
+
   return (
     <NavbarContentLayout
       left={
@@ -52,9 +56,11 @@ export default function NavbarContent() {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          <NavbarSearch>
-            <SearchBar />
-          </NavbarSearch>
+          {windowSize === 'mobile' && (
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
         </>
       }
     />