awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39: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

10
frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
View File

@@ -31,6 +31,7 @@ export const SecretPathInput = ({
const [inputValue, setInputValue] = useState(propValue ?? "");
const [secretPath, setSecretPath] = useState("/");
const [suggestions, setSuggestions] = useState<string[]>([]);
const [isInputFocused, setIsInputFocus] = useState(false);
const [highlightedIndex, setHighlightedIndex] = useState(-1);
const debouncedInputValue = useDebounce(inputValue, 200);
@@ -108,7 +109,7 @@ export const SecretPathInput = ({
return (
<Popover.Root
open={suggestions.length > 0 && inputValue.length > 1}
open={suggestions.length > 0 && isInputFocused}
onOpenChange={() => {
setHighlightedIndex(-1);
}}
@@ -119,6 +120,8 @@ export const SecretPathInput = ({
type="text"
autoComplete="off"
onKeyDown={handleKeyDown}
onFocus={() => setIsInputFocus(true)}
onBlur={() => setIsInputFocus(false)}
value={inputValue}
onChange={handleInputChange}
className={containerClassName}
@@ -150,8 +153,9 @@ export const SecretPathInput = ({
key={`secret-reference-secret-${i + 1}`}
>
<div
className={`${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`}
className={`${
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 items-center text-yellow-700">