lightcordwarez
/
BetterDiscordApp-rauenzi
mirror of https://github.com/rauenzi/BetterDiscordApp.git
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Auto focus search bar when plugins/themes tab is selected (#1705) 

#1213
This commit is contained in:
Hinson Chan 2024-02-21 15:25:54 -08:00 committed by GitHub
parent f1a11370e7
commit 0abf043d6d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
renderer/src/ui/settings/components/search.jsx
View File

@ -1,19 +1,26 @@
import React from "@modules/react";
import SearchIcon from "@ui/icons/search";
const {useState, useCallback} = React;
const {useState, useEffect, useCallback, useRef} = React;
export default function Search({onChange, className, onKeyDown, placeholder}) {
const input = useRef(null);
const [value, setValue] = useState("");
// focus search bar on page select
useEffect(()=>{
if (!input.current) return;
input.current.focus();
}, []);
const change = useCallback((e) => {
onChange?.(e);
setValue(e.target.value);
}, [onChange]);
return <div className={"bd-search-wrapper" + (className ? ` ${className}` : "")}>
<input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} />
<input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} ref={input}/>
<SearchIcon />
</div>;