diff --git a/desktop/plugins/public/network/request-mocking/ManageMockResponsePanel.tsx b/desktop/plugins/public/network/request-mocking/ManageMockResponsePanel.tsx
index 5fc0c84ea..1677963b9 100644
--- a/desktop/plugins/public/network/request-mocking/ManageMockResponsePanel.tsx
+++ b/desktop/plugins/public/network/request-mocking/ManageMockResponsePanel.tsx
@@ -132,6 +132,15 @@ export function ManageMockResponsePanel(props: Props) {
     [handleDelete, handleToggle],
   );
 
+  const handleSelect = useCallback(
+    (id: string) => {
+      if (id) {
+        selectedIdAtom.set(id);
+      }
+    },
+    [selectedIdAtom],
+  );
+
   return (
     <Layout.Left resizable style={{minHeight: 400}}>
       <Layout.Top>
@@ -161,6 +170,7 @@ export function ManageMockResponsePanel(props: Props) {
           items={items}
           selection={selectedId}
           onRenderItem={handleRender}
+          onSelect={handleSelect}
           scrollable
         />
       </Layout.Top>
diff --git a/desktop/plugins/public/network/request-mocking/MockResponseDetails.tsx b/desktop/plugins/public/network/request-mocking/MockResponseDetails.tsx
index 23cbf853d..ce4ac301d 100644
--- a/desktop/plugins/public/network/request-mocking/MockResponseDetails.tsx
+++ b/desktop/plugins/public/network/request-mocking/MockResponseDetails.tsx
@@ -35,8 +35,10 @@ function HeaderInput(props: {
       type="text"
       placeholder="Name"
       value={value}
-      onChange={(event) => setValue(event.target.value)}
-      onBlur={() => props.onUpdate(value)}
+      onChange={(event) => {
+        setValue(event.target.value);
+        props.onUpdate(event.target.value);
+      }}
       style={props.style}
     />
   );