Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$ 
Keyboard shortcut for search
How to implement a keyboard shortcut for the search dropdown in the support forum theme react version?
Replies (3)
Online gaming can help Infinite Craft players feel like they are part of a community of like-minded people.
Hi,
Sorry for the late reply.
If you're using our MenuComponent, you can display and hide the menu using the component's show and hide functions.
Here is an example:
useEffect(() => {
setTimeout(()=>{
if(!searchEl.current){
return;
}
const menuInst = MenuComponent.getInstance(searchEl.current);
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "/") {
menuInst?.show(searchEl.current!);
event.preventDefault();
}
};
document.addEventListener("keydown", handleKeyDown);
})
}, []);Regards,
Lauris Stepanovs,
Keenthemes Support Team
I build similar and here is a basic example (you have to customize this to your needs
import React, { useState, useEffect } from "react";
const Search = () => {
const [isDropdownVisible, setDropdownVisible] = useState(false);
useEffect(() => {
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, []);
const handleKeyDown = (event) => {
// Check if the "/" key is pressed
if (event.key === "/") {
event.preventDefault();
toggleDropdown();
}
};
const toggleDropdown = () => {
setDropdownVisible(!isDropdownVisible);
};
return (
<div>
<input
type="text"
placeholder="Search..."
onFocus={() => setDropdownVisible(true)}
onBlur={() => setDropdownVisible(false)}
/>
{isDropdownVisible && (
<div className="search-dropdown">
{/* Dropdown content goes here */}
<p>Dropdown Content</p>
</div>
)}
</div>
);
};
export default Search;
