diff --git a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx index ed97ad8dd..9dfb5ff62 100644 --- a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx +++ b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx @@ -31,6 +31,7 @@ export const SecretPathInput = ({ const [inputValue, setInputValue] = useState(propValue ?? ""); const [secretPath, setSecretPath] = useState("/"); const [suggestions, setSuggestions] = useState([]); + const [isInputFocused, setIsInputFocus] = useState(false); const [highlightedIndex, setHighlightedIndex] = useState(-1); const debouncedInputValue = useDebounce(inputValue, 200); @@ -55,7 +56,9 @@ export const SecretPathInput = ({ ) { setSecretPath(debouncedInputValue); } + }, [debouncedInputValue]); + useEffect(() => { // filter suggestions based on matching const searchFragment = debouncedInputValue.split("/").pop() || ""; const filteredSuggestions = folders @@ -65,7 +68,7 @@ export const SecretPathInput = ({ .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())); setSuggestions(filteredSuggestions); - }, [debouncedInputValue]); + }, [debouncedInputValue, folders]); const handleSuggestionSelect = (selectedIndex: number) => { if (!suggestions[selectedIndex]) { @@ -75,7 +78,7 @@ export const SecretPathInput = ({ const validPaths = inputValue.split("/"); validPaths.pop(); - const newValue = `${validPaths.join("/")}/${suggestions[selectedIndex]}`; + const newValue = `${validPaths.join("/")}/${suggestions[selectedIndex]}/`; onChange?.(newValue); setInputValue(newValue); setSecretPath(newValue); @@ -108,7 +111,7 @@ export const SecretPathInput = ({ return ( 0 && inputValue.length > 1} + open={suggestions.length > 0 && isInputFocused} onOpenChange={() => { setHighlightedIndex(-1); }} @@ -119,6 +122,8 @@ export const SecretPathInput = ({ type="text" autoComplete="off" onKeyDown={handleKeyDown} + onFocus={() => setIsInputFocus(true)} + onBlur={() => setIsInputFocus(false)} value={inputValue} onChange={handleInputChange} className={containerClassName} @@ -150,8 +155,9 @@ export const SecretPathInput = ({ key={`secret-reference-secret-${i + 1}`} >
diff --git a/frontend/src/hooks/api/secretFolders/queries.tsx b/frontend/src/hooks/api/secretFolders/queries.tsx index 71c63f3eb..d2882c551 100644 --- a/frontend/src/hooks/api/secretFolders/queries.tsx +++ b/frontend/src/hooks/api/secretFolders/queries.tsx @@ -79,7 +79,7 @@ export const useGetFoldersByEnv = ({ }); }); return [...names]; - }, [(folders || []).map((folder) => folder.data)]); + }, [...(folders || []).map((folder) => folder.data)]); const isFolderPresentInEnv = useCallback( (name: string, env: string) => { @@ -91,7 +91,7 @@ export const useGetFoldersByEnv = ({ } return false; }, - [(folders || []).map((folder) => folder.data)] + [...(folders || []).map((folder) => folder.data)] ); const getFolderByNameAndEnv = useCallback(