From 4d3f9c7988ada6b45a590b07851e260e391d7d66 Mon Sep 17 00:00:00 2001
From: Sebastien Ahkrin <30870051+Sebastien-Ahkrin@users.noreply.github.com>
Date: Mon, 20 Jan 2025 14:34:54 +0100
Subject: [PATCH] feat: press enter will save the input

---
 .../inline_editable_renderer.tsx              | 14 +++++++++----
 stories/components/editable.stories.tsx       | 20 +++++++++++--------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/inline_editable_renderer/inline_editable_renderer.tsx b/src/components/inline_editable_renderer/inline_editable_renderer.tsx
index 54ce750b..5b0e1698 100644
--- a/src/components/inline_editable_renderer/inline_editable_renderer.tsx
+++ b/src/components/inline_editable_renderer/inline_editable_renderer.tsx
@@ -1,11 +1,12 @@
 import { Colors } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import type { ReactNode } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
 export interface InlineRendererEditableProps<T extends HTMLElement> {
   ref: (node: T | null) => void;
-  toggle: () => void;
+  stopRendering: () => void;
+  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export interface InlineEditableProps<T extends HTMLElement> {
@@ -50,13 +51,18 @@ export function InlineEditable<T extends HTMLElement>(
   const renderEditableProps = useMemo<InlineRendererEditableProps<T>>(() => {
     return {
       isRendered: isInputRendered,
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          setIsInputRendered(false);
+        }
+      },
       ref: (node) => {
         if (!node) return;
         node.focus();
       },
-      toggle,
+      stopRendering: () => setIsInputRendered(false),
     };
-  }, [isInputRendered, toggle]);
+  }, [isInputRendered]);
 
   return (
     <div style={{ position: 'relative' }}>
diff --git a/stories/components/editable.stories.tsx b/stories/components/editable.stories.tsx
index 8294a955..44e15130 100644
--- a/stories/components/editable.stories.tsx
+++ b/stories/components/editable.stories.tsx
@@ -79,12 +79,13 @@ export function InsideTable() {
         header: 'Label',
         cell: ({ getValue, row: { index } }) => (
           <InlineEditableComponent
-            renderEditable={({ ref, toggle }) => (
+            renderEditable={({ ref, stopRendering, onKeyDown }) => (
               <InlineEditableInput
                 ref={ref}
+                onKeyDown={onKeyDown}
                 defaultValue={getValue()}
                 onBlur={(event) => {
-                  toggle();
+                  stopRendering();
                   changeValue(index, 'label', event.currentTarget.value);
                 }}
               />
@@ -98,12 +99,13 @@ export function InsideTable() {
         header: 'Field',
         cell: ({ getValue, row: { index } }) => (
           <InlineEditableComponent
-            renderEditable={({ ref, toggle }) => (
+            renderEditable={({ ref, stopRendering, onKeyDown }) => (
               <InlineEditableInput
                 ref={ref}
+                onKeyDown={onKeyDown}
                 defaultValue={getValue()}
                 onBlur={(event) => {
-                  toggle();
+                  stopRendering();
                   changeValue(index, 'field', event.currentTarget.value);
                 }}
               />
@@ -117,12 +119,13 @@ export function InsideTable() {
         header: 'Format',
         cell: ({ getValue, row: { index } }) => (
           <InlineEditableComponent
-            renderEditable={({ ref, toggle }) => (
+            renderEditable={({ ref, stopRendering, onKeyDown }) => (
               <InlineEditableInput
                 ref={ref}
+                onKeyDown={onKeyDown}
                 defaultValue={getValue()}
                 onBlur={(event) => {
-                  toggle();
+                  stopRendering();
                   changeValue(index, 'format', event.currentTarget.value);
                 }}
               />
@@ -179,12 +182,13 @@ export const InlineEditable = {
       <div style={{ width: 100 }}>
         <span>State: {state}</span>
         <InlineEditableComponent
-          renderEditable={({ ref, toggle }) => (
+          renderEditable={({ ref, stopRendering, onKeyDown }) => (
             <InlineEditableInput
               ref={ref}
+              onKeyDown={onKeyDown}
               defaultValue={state}
               onBlur={(event) => {
-                toggle();
+                stopRendering();
 
                 setState(event.currentTarget.value);
               }}