From 5e00bd5109bd07dd16cf7de7646183c3d817dc15 Mon Sep 17 00:00:00 2001
From: gatzjames <jamesgatzos@gmail.com>
Date: Wed, 20 Nov 2024 17:22:12 +0100
Subject: [PATCH] fix key value editor focus issue for RequestParameters editor

---
 .../editors/request-parameters-editor.tsx       |  3 ---
 .../key-value-editor/key-value-editor.tsx       | 17 +++++++++--------
 2 files changed, 9 insertions(+), 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
index bfca8cfd9ec..a027693326c 100644
--- 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
index e82bd3c8956..03de66622f9 100644
--- 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]}