Merge pull request polkassembly#1014 from polkassembly/fix/searchBarI…

…ssue

fix/searchbar issue

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}

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}

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((prev) => !prev);
+			}
+		};
+		document.addEventListener('keydown', handleKeyDown);
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [open]);
+
 	return allowedNetwork.includes(network?.toUpperCase()) ? (
 		<div className={className}>
 			{isSmallScreen ? (