fix key value editor focus issue for RequestParameters editor

Kong · Nov 20, 2024 · 5e00bd5 · 5e00bd5
1 parent be18faf
commit 5e00bd5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/packages/insomnia/src/ui/components/editors/request-parameters-editor.tsx b/packages/insomnia/src/ui/components/editors/request-parameters-editor.tsx
@@ -74,11 +74,8 @@ export const RequestParametersEditor: FC<Props> = ({
     );
   }
 
-  const pairsIds = activeRequest.parameters.map((param, index) => param.id || index).join(',');
-
   return (
     <KeyValueEditor
-      key={pairsIds}
       allowMultiline
       namePlaceholder="name"
       valuePlaceholder="value"

diff --git a/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx b/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx
@@ -1,4 +1,4 @@
-import React, { type FC, Fragment, useCallback } from 'react';
+import React, { type FC, Fragment, useCallback, useMemo } from 'react';
 import { Button, DropIndicator, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Popover, ToggleButton, Toolbar, useDragAndDrop } from 'react-aria-components';
 
 import { describeByteSize, generateId } from '../../../common/misc';
@@ -63,17 +63,19 @@ export const KeyValueEditor: FC<Props> = ({
 }) => {
   const [showDescription, setShowDescription] = React.useState(false);
   const { enabled: nunjucksEnabled } = useNunjucksEnabled();
-  let pairsListItems = pairs.length > 0 ? pairs.map(pair => ({ ...pair, id: pair.id || generateId('pair') })) : [createEmptyPair()];
+  let pairsListItems = useMemo(
+    () => pairs.length > 0 ? pairs.map(pair => ({ ...pair, id: pair.id || generateId('pair') })) : [createEmptyPair()],
+    // Ensure same array data will not generate different kvPairs to avoid flash issue
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(pairs)]
+  );
   const initialReadOnlyItems = readOnlyPairs?.map(pair => ({ ...pair, id: pair.id || generateId('pair') })) || [];
 
   const upsertPair = useCallback(function upsertPair(pairsListItems: Pair[], pair: Pair) {
     if (pairsListItems.find(item => item.id === pair.id)) {
-      pairsListItems = pairsListItems.map(item => (item.id === pair.id ? pair : item));
-      onChange(pairsListItems);
+      onChange(pairsListItems.map(item => (item.id === pair.id ? pair : item)));
     } else {
-      const id = pair.id === 'pair-empty' ? generateId('pair') : pair.id;
-      pairsListItems = pairsListItems.concat({ ...pair, id });
-      onChange(pairsListItems);
+      onChange([...pairsListItems, pair]);
     }
   }, [onChange]);
 
@@ -305,7 +307,6 @@ export const KeyValueEditor: FC<Props> = ({
       <ListBox
         aria-label='Key-value pairs'
         selectionMode='none'
-        // dependencies={[showDescription, nunjucksEnabled]}
         className="flex pt-1 flex-col w-full overflow-y-auto flex-1 relative"
         dragAndDropHooks={dragAndDropHooks}
         dependencies={[upsertPair, showDescription, nunjucksEnabled]}