Fix: Environment kv editor flash when user input the first time [INS-…

…4709] (#8182) * Fix key-value editor flash issue when input text for the first time * fix key value editor focus issue for RequestParameters editor by James Co-authored-by: gatzjames <[email protected]>
Kong · Nov 21, 2024 · c9c722f · c9c722f
1 parent d7240ee
commit c9c722f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/...ages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx b/...ages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Button, type ButtonProps, DropIndicator, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Popover, Toolbar, useDragAndDrop } from 'react-aria-components';
 
 import { generateId } from '../../../../common/misc';
@@ -39,7 +39,12 @@ const ItemButton = (props: ButtonProps & { tabIndex?: number }) => {
 };
 
 export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => {
-  const kvPairs: EnvironmentKvPairData[] = data.length > 0 ? [...data] : [createNewPair()];
+  const kvPairs: EnvironmentKvPairData[] = useMemo(
+    () => data.length > 0 ? [...data] : [createNewPair()],
+    // Ensure same array data will not generate different kvPairs to avoid flash issue
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(data)]
+  );
   const codeModalRef = useRef<CodePromptModalHandle>(null);
   const [kvPairError, setKvPairError] = useState<{ id: string; error: string }[]>([]);
 
@@ -271,7 +276,6 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => {
             <Icon icon={enabled ? 'check-square' : 'square'} />
           </ItemButton>
           <PromptButton
-            disabled={kvPairs.length <= 1}
             className="flex	items-center disabled:opacity-50 justify-center h-7 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
             fullWidth
             confirmMessage=''

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]}