Fix pair editor

src-web/components/core/PairEditor.tsx

@@ -32,7 +32,6 @@ import { IconButton } from './IconButton';
 import type { InputHandle, InputProps } from './Input';
 import { Input } from './Input';
 import { ensurePairId } from './PairEditor.util';
-import { PlainInput } from './PlainInput';
 import type { RadioDropdownItem } from './RadioDropdown';
 import { RadioDropdown } from './RadioDropdown';
 
@@ -80,7 +79,7 @@ export type PairWithId = Pair & {
 };
 
 /** Max number of pairs to show before prompting the user to reveal the rest */
-const MAX_INITIAL_PAIRS = 50;
+const MAX_INITIAL_PAIRS = 30;
 
 export function PairEditor({
   allowFileValues,
@@ -190,31 +189,21 @@ export function PairEditor({
     [setPairsAndSave, pairs],
   );
 
-  const handleFocusName = useCallback((pair: Pair) => {
+  const handleFocusName = useCallback(
-    setPairs((pairs) => {
+    (pair: Pair) => {
       const isLast = pair.id === pairs[pairs.length - 1]?.id;
-      if (isLast) {
+      if (isLast) setPairs([...pairs, emptyPair()]);
-        const prevPair = pairs[pairs.length - 1];
+    },
-        rowsRef.current[prevPair?.id ?? 'n/a']?.focusName();
+    [pairs],
-        return [...pairs, emptyPair()];
+  );
-      } else {
-        return pairs;
-      }
-    });
-  }, []);
 
-  const handleFocusValue = useCallback((pair: Pair) => {
+  const handleFocusValue = useCallback(
-    setPairs((pairs) => {
+    (pair: Pair) => {
       const isLast = pair.id === pairs[pairs.length - 1]?.id;
-      if (isLast) {
+      if (isLast) setPairs([...pairs, emptyPair()]);
-        const prevPair = pairs[pairs.length - 1];
+    },
-        rowsRef.current[prevPair?.id ?? 'n/a']?.focusValue();
+    [pairs],
-        return [...pairs, emptyPair()];
+  );
-      } else {
-        return pairs;
-      }
-    });
-  }, []);
 
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
 
@@ -282,8 +271,10 @@ export function PairEditor({
         '-mr-2 pr-2',
         // Pad to make room for the drag divider
         'pt-0.5',
+        'grid grid-rows-[auto_1fr]',
       )}
     >
+      <div>
         <DndContext
           autoScroll
           sensors={sensors}
@@ -350,6 +341,17 @@ export function PairEditor({
           </DragOverlay>
         </DndContext>
       </div>
+
+      <div
+        // There's a weird bug where clicking below one of the above Codemirror inputs will cause
+        // it to focus. Putting this element here prevents that
+        aria-hidden
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      />
+    </div>
   );
 }
 
@@ -579,20 +581,6 @@ export function PairEditorRow({
           'gap-0.5 grid-cols-1 grid-rows-2',
         )}
       >
-        {isLast ? (
-          // Use PlainInput for last ones because there's a unique bug where clicking below
-          // the Codemirror input focuses it.
-          <PlainInput
-            hideLabel
-            size="sm"
-            containerClassName={classNames(isLast && 'border-dashed')}
-            className={classNames(isDraggingGlobal && 'pointer-events-none')}
-            label="Name"
-            name={`name[${index}]`}
-            onFocus={handleFocusName}
-            placeholder={namePlaceholder ?? 'name'}
-          />
-        ) : (
         <Input
           setRef={initNameInputRef}
           hideLabel
@@ -616,7 +604,6 @@ export function PairEditorRow({
           autocompleteVariables={nameAutocompleteVariables}
           autocompleteFunctions={nameAutocompleteFunctions}
         />
-        )}
         <div className="w-full grid grid-cols-[minmax(0,1fr)_auto] gap-1 items-center">
           {pair.isFile ? (
             <SelectFile
@@ -626,20 +613,6 @@ export function PairEditorRow({
               filePath={pair.value}
               onChange={handleChangeValueFile}
             />
-          ) : isLast ? (
-            // Use PlainInput for last ones because there's a unique bug where clicking below
-            // the Codemirror input focuses it.
-            <PlainInput
-              hideLabel
-              disabled={disabled}
-              size="sm"
-              containerClassName={classNames(isLast && 'border-dashed')}
-              label="Value"
-              name={`value[${index}]`}
-              className={classNames(isDraggingGlobal && 'pointer-events-none')}
-              onFocus={handleFocusValue}
-              placeholder={valuePlaceholder ?? 'value'}
-            />
           ) : pair.value.includes('\n') ? (
             <Button
               color="secondary"