From b9883fdd140ec3adcbd08efbcbe73c6c181d0dea Mon Sep 17 00:00:00 2001
From: James Gatz <jamesgatzos@gmail.com>
Date: Tue, 25 Jun 2024 16:42:36 +0200
Subject: [PATCH] fix(KeyValue Editor): Pressing enter on an input should
 update the value (#7580)

* fix onKeydown using the previous value

* use keybindingHandler for improved keyboard support
---
 .../key-value-editor/key-value-editor.tsx     | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

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 8b4845d3fe..827c456ef2 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
@@ -3,6 +3,7 @@ import React, { FC, Fragment, useCallback, useRef, useState } from 'react';
 import { FocusScope } from 'react-aria';
 import { Button, Dialog, DialogTrigger, DropIndicator, GridList, GridListItem, Menu, MenuItem, MenuTrigger, Popover, ToggleButton, Toolbar, useDragAndDrop } from 'react-aria-components';
 import { useListData } from 'react-stately';
+import { createKeybindingsHandler } from 'tinykeys';
 
 import { describeByteSize, generateId } from '../../../common/misc';
 import { useNunjucksEnabled } from '../../context/nunjucks/nunjucks-enabled-context';
@@ -54,6 +55,20 @@ const EditableOneLineEditorModal = ({
     }
   }, [buttonRef]);
 
+  const onKeydown = useCallback((e: KeyboardEvent, value: string) => {
+    const handler = createKeybindingsHandler({
+      'Enter': e => {
+        e.preventDefault();
+        setIsOpen(false);
+        onChange(value);
+        setValue(value);
+      },
+    });
+
+    handler(e);
+  },
+    [onChange]);
+
   useResizeObserver({
     ref: buttonRef,
     onResize: onResize,
@@ -116,13 +131,7 @@ const EditableOneLineEditorModal = ({
                 readOnly={readOnly}
                 getAutocompleteConstants={getAutocompleteConstants}
                 onChange={setValue}
-                onKeyDown={e => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    onChange(value);
-                    setIsOpen(false);
-                  }
-                }}
+                onKeyDown={onKeydown}
               />
             </div>
           </FocusScope>