diff --git a/src-web/components/core/Input.tsx b/src-web/components/core/Input.tsx index f70da26f..50dc1a4f 100644 --- a/src-web/components/core/Input.tsx +++ b/src-web/components/core/Input.tsx @@ -401,7 +401,7 @@ function EncryptionInput({ setState({ fieldType: 'encrypted', security, value, obscured: true, error: null }); // We're calling this here because we want the input to be fully initialized so the caller // can do stuff like change the selection. - setRef?.(inputRef.current); + requestAnimationFrame(() => setRef?.(inputRef.current)); }, onError: (value) => { setState({ diff --git a/src-web/components/core/PairEditor.tsx b/src-web/components/core/PairEditor.tsx index 32287c2f..0a52db74 100644 --- a/src-web/components/core/PairEditor.tsx +++ b/src-web/components/core/PairEditor.tsx @@ -128,14 +128,19 @@ export function PairEditor({ const initPairEditorRow = useCallback( (id: string, n: RowHandle | null) => { + const isLast = id === pairs[pairs.length - 1]?.id; + if (isLast) return; // Never add the last pair + rowsRef.current[id] = n; - const ready = - Object.values(rowsRef.current).filter((v) => v != null).length === pairs.length - 1; // Ignore the last placeholder pair + const validHandles = Object.values(rowsRef.current).filter((v) => v != null); + + // NOTE: Ignore the last placeholder pair + const ready = validHandles.length === pairs.length - 1; if (ready) { setRef?.(handle); } }, - [handle, pairs.length, setRef], + [handle, pairs, setRef], ); useEffect(() => { diff --git a/src-web/lib/editEnvironment.tsx b/src-web/lib/editEnvironment.tsx index f600a806..aa75b7fe 100644 --- a/src-web/lib/editEnvironment.tsx +++ b/src-web/lib/editEnvironment.tsx @@ -39,6 +39,8 @@ export async function editEnvironment( } } + let didFocusVariable = false; + toggleDialog({ id: 'environment-editor', noPadding: true, @@ -48,8 +50,9 @@ export async function editEnvironment( { - if (focusId) { + if (focusId && !didFocusVariable) { pairEditor?.focusValue(focusId); + didFocusVariable = true; } }} />