awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 23:27:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

misc: added handling of input focus

Browse Source
This commit is contained in:
Sheen Capadngan
2024-05-08 00:43:14 +08:00
parent 78922a80e2
commit 8bab14a672
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
+7 -3
View File
@@ -31,6 +31,7 @@ export const SecretPathInput = ({
const [inputValue, setInputValue] = useState(propValue ?? ""); const [inputValue, setInputValue] = useState(propValue ?? "");
const [secretPath, setSecretPath] = useState("/"); const [secretPath, setSecretPath] = useState("/");
const [suggestions, setSuggestions] = useState<string[]>([]); const [suggestions, setSuggestions] = useState<string[]>([]);
const [isInputFocused, setIsInputFocus] = useState(false);
const [highlightedIndex, setHighlightedIndex] = useState(-1); const [highlightedIndex, setHighlightedIndex] = useState(-1);
const debouncedInputValue = useDebounce(inputValue, 200); const debouncedInputValue = useDebounce(inputValue, 200);
@@ -108,7 +109,7 @@ export const SecretPathInput = ({
return ( return (
<Popover.Root <Popover.Root
open={suggestions.length > 0 && inputValue.length > 1} open={suggestions.length > 0 && isInputFocused}
onOpenChange={() => { onOpenChange={() => {
setHighlightedIndex(-1); setHighlightedIndex(-1);
}} }}
@@ -119,6 +120,8 @@ export const SecretPathInput = ({
type="text" type="text"
autoComplete="off" autoComplete="off"
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onFocus={() => setIsInputFocus(true)}
onBlur={() => setIsInputFocus(false)}
value={inputValue} value={inputValue}
onChange={handleInputChange} onChange={handleInputChange}
className={containerClassName} className={containerClassName}
@@ -150,8 +153,9 @@ export const SecretPathInput = ({
key={`secret-reference-secret-${i + 1}`} key={`secret-reference-secret-${i + 1}`}
> >
<div <div
className={`${highlightedIndex === i ? "bg-gray-600" : "" className={`${
} text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`} highlightedIndex === i ? "bg-gray-600" : ""
} text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
> >
<div className="flex gap-2"> <div className="flex gap-2">
<div className="flex items-center text-yellow-700"> <div className="flex items-center text-yellow-700">