Fix Input ref timing, PairEditor initialization, and environment variable focus

src-web/components/HttpRequestPane.tsx

@@ -354,7 +354,6 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
             isLoading={activeResponse != null && activeResponse.state !== 'closed'}
           />
           <Tabs
-            key={activeRequest.id} // Freshen tabs on request change
             value={activeTab}
             label="Request"
             onChangeValue={setActiveTab}

src-web/components/WebsocketRequestPane.tsx

@@ -229,7 +229,6 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
             />
           </div>
           <Tabs
-            key={activeRequest.id} // Freshen tabs on request change
             value={activeTab}
             label="Request"
             onChangeValue={setActiveTab}

src-web/components/core/Editor/Editor.tsx

@@ -376,7 +376,7 @@ export function Editor({
 
   // Initialize the editor when ref mounts
   const initEditorRef = useCallback(
-    function initializeCodemirror(container: HTMLDivElement | null) {
+    function initEditorRef(container: HTMLDivElement | null) {
       if (container === null) {
         cm.current?.view.destroy();
         cm.current = null;
@@ -455,17 +455,9 @@ export function Editor({
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+    [forceUpdateKey],
   );
 
-  // Update editor doc when force update key changes
-  useEffect(() => {
-    if (cm.current?.view != null) {
-      updateContents(cm.current.view, defaultValue || '');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [forceUpdateKey]);
-
   // For read-only mode, update content when `defaultValue` changes
   useEffect(
     function updateReadOnlyEditor() {

src-web/components/core/Editor/filter/extension.ts

@@ -112,7 +112,6 @@ function fieldValueCompletions(
 ): Completion[] | null {
   if (!def || !def.values) return null;
   const vals = Array.isArray(def.values) ? def.values : def.values();
-  // console.log("HELLO", v, v.match(IDENT));
   return vals.map((v) => ({
     label: v.match(IDENT_ONLY) ? v : `"${v}"`,
     displayLabel: v,

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({

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(() => {

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(
         <EnvironmentEditDialog
           initialEnvironmentId={environment?.id ?? null}
           setRef={(pairEditor: PairEditorHandle | null) => {
-            if (focusId) {
+            if (focusId && !didFocusVariable) {
               pairEditor?.focusValue(focusId);
+              didFocusVariable = true;
             }
           }}
         />