From 2c8e58b261880069946f6ca4ed92516b0f439f2b Mon Sep 17 00:00:00 2001
From: Jasmeet Singh <jasmeetsonu990@gmail.com>
Date: Sat, 2 Dec 2023 12:50:11 +0530
Subject: [PATCH 1/2] fix/searchbar issue

---
 pages/_app.tsx                  |  4 ++--
 src/components/Search/index.tsx | 12 ++++++++++--
 src/ui-components/SearchBar.tsx | 14 +++++++++++++-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3e434a2ed2..a056c3f72c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -10,7 +10,7 @@ import { useRouter } from 'next/router';
 import NextNProgress from 'nextjs-progressbar';
 import { useEffect, useState } from 'react';
 import AppLayout from 'src/components/AppLayout';
-import CMDK from 'src/components/CMDK';
+// import CMDK from 'src/components/CMDK';
 import { antdTheme } from 'styles/antdTheme';
 
 import { ApiContextProvider } from '~src/context/ApiContext';
@@ -93,7 +93,7 @@ function App({ Component, pageProps }: AppProps) {
 										{showSplashScreen && <SplashLoader />}
 										<main className={`${poppins.variable} ${poppins.className} ${robotoMono.className} ${workSans.className} ${showSplashScreen ? 'hidden' : ''}`}>
 											<NextNProgress color='#E5007A' />
-											<CMDK />
+											{/* <CMDK /> */}
 											<AppLayout
 												Component={Component}
 												pageProps={pageProps}
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 45b5a4a15b..af6025aacf 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -3,8 +3,8 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 /* eslint-disable sort-keys */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Checkbox, Input, List, Modal, Popover, Radio, RadioChangeEvent, Collapse } from 'antd';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Checkbox, Input, List, Modal, Popover, Radio, RadioChangeEvent, Collapse, InputRef } from 'antd';
 import _ from 'lodash';
 import { CheckboxValueType } from 'antd/es/checkbox/Group';
 import { networkTrackInfo } from '~src/global/post_trackInfo';
@@ -115,6 +115,13 @@ const NewSearch = ({ className, openModal, setOpenModal, isSuperSearch, setIsSup
 	const [isFilter, setIsFilter] = useState<boolean>(false);
 	const [justStart, setJustStart] = useState<boolean>(true);
 	const currentUser = useUserDetailsSelector();
+	const inputRef = useRef<InputRef>(null);
+
+	useEffect(() => {
+		if (openModal) {
+			setTimeout(() => inputRef.current?.focus(), 0);
+		}
+	}, [openModal]);
 
 	Object.keys(post_topic).map((topic) => topicOptions.push(topicToOptionText(topic)));
 
@@ -491,6 +498,7 @@ const NewSearch = ({ className, openModal, setOpenModal, isSuperSearch, setIsSup
 		>
 			<div className={`${className} ${isSuperSearch && !loading && 'pb-2'}`}>
 				<Input
+					ref={inputRef}
 					className='placeholderColor mt-2 h-[40px] rounded-[4px] border-pink_primary text-bodyBlue dark:border-separatorDark dark:bg-section-dark-overlay dark:text-blue-dark-high dark:focus:border-[#91054F]'
 					type='search'
 					value={searchInput}
diff --git a/src/ui-components/SearchBar.tsx b/src/ui-components/SearchBar.tsx
index 5b828ad858..1cb2c5de42 100644
--- a/src/ui-components/SearchBar.tsx
+++ b/src/ui-components/SearchBar.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { SearchOutlined } from '@ant-design/icons';
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import ClientOnly, { Search } from './ClientOnly';
 import NewSearch from 'src/components/Search';
@@ -26,6 +26,18 @@ const SearchBar: FC<ISearchBarProps> = (props) => {
 	const [isSuperSearch, setIsSuperSearch] = useState<boolean>(false);
 	const { resolvedTheme: theme } = useTheme();
 
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+				setOpen(!open);
+			}
+		};
+		document.addEventListener('keydown', handleKeyDown);
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [open]);
+
 	return allowedNetwork.includes(network?.toUpperCase()) ? (
 		<div className={className}>
 			{isSmallScreen ? (

From b556aa3f07013eca586976bf737c640cc8285c3a Mon Sep 17 00:00:00 2001
From: Jasmeet Singh <jasmeetsonu990@gmail.com>
Date: Sat, 2 Dec 2023 13:04:37 +0530
Subject: [PATCH 2/2] changing setOpen function

---
 src/ui-components/SearchBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui-components/SearchBar.tsx b/src/ui-components/SearchBar.tsx
index 1cb2c5de42..a1d435a1c3 100644
--- a/src/ui-components/SearchBar.tsx
+++ b/src/ui-components/SearchBar.tsx
@@ -29,7 +29,7 @@ const SearchBar: FC<ISearchBarProps> = (props) => {
 	useEffect(() => {
 		const handleKeyDown = (event: KeyboardEvent) => {
 			if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
-				setOpen(!open);
+				setOpen((prev) => !prev);
 			}
 		};
 		document.addEventListener('keydown', handleKeyDown);