From 56dabbdec8a1d2b0b98a4a9c6f820a9f839bd1cf Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Fri, 28 Jul 2023 10:29:27 -0400
Subject: [PATCH] [PR Feedback] - Remove fragment surrounding inline edit
 component - Trim title before saving - Add onChange listener to input to
 reset errors upon input change

---
 .../components/header_page/editable_title.tsx | 77 ++++++++++---------
 1 file changed, 40 insertions(+), 37 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/header_page/editable_title.tsx b/x-pack/plugins/cases/public/components/header_page/editable_title.tsx
index 5f504f8052cd2..14d790a69cf66 100644
--- a/x-pack/plugins/cases/public/components/header_page/editable_title.tsx
+++ b/x-pack/plugins/cases/public/components/header_page/editable_title.tsx
@@ -38,7 +38,7 @@ const EditableTitleComponent: React.FC<EditableTitleProps> = ({ onSubmit, isLoad
       }
 
       if (newTitleValue !== title) {
-        onSubmit(newTitleValue);
+        onSubmit(newTitleValue.trim());
       }
       setEditMode(false);
       setErrors([]);
@@ -56,43 +56,46 @@ const EditableTitleComponent: React.FC<EditableTitleProps> = ({ onSubmit, isLoad
   const hasErrors = errors.length > 0;
 
   return (
-    <>
-      <EuiFlexGroup>
-        <EuiFlexItem grow={true} css={releasePhase && { overflow: 'hidden' }}>
-          <EuiInlineEditTitle
-            defaultValue={title}
-            readModeProps={{
-              onClick: () => setEditMode(true),
-              'data-test-subj': 'editable-title-header-value',
-            }}
-            editModeProps={{
-              formRowProps: { error: errors },
-              inputProps: { 'data-test-subj': 'editable-title-input-field' },
-              saveButtonProps: { 'data-test-subj': 'editable-title-submit-btn' },
-              cancelButtonProps: {
-                onClick: () => onCancel(),
-                'data-test-subj': 'editable-title-cancel-btn',
+    <EuiFlexGroup>
+      <EuiFlexItem grow={true} css={releasePhase && { overflow: 'hidden' }}>
+        <EuiInlineEditTitle
+          defaultValue={title}
+          readModeProps={{
+            onClick: () => setEditMode(true),
+            'data-test-subj': 'editable-title-header-value',
+          }}
+          editModeProps={{
+            formRowProps: { error: errors },
+            inputProps: {
+              'data-test-subj': 'editable-title-input-field',
+              onChange: () => {
+                setErrors([]);
               },
-            }}
-            inputAriaLabel="Editable title input field"
-            heading="h1"
-            size="s"
-            isInvalid={hasErrors}
-            isLoading={isLoading}
-            isReadOnly={!permissions.update}
-            onSave={(value) => {
-              return onClickSubmit(value);
-            }}
-            startWithEditOpen={editMode}
-            data-test-subj="header-page-title"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          {releasePhase === 'experimental' && <TitleExperimentalBadge />}
-          {releasePhase === 'beta' && <TitleBetaBadge />}
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </>
+            },
+            saveButtonProps: { 'data-test-subj': 'editable-title-submit-btn' },
+            cancelButtonProps: {
+              onClick: () => onCancel(),
+              'data-test-subj': 'editable-title-cancel-btn',
+            },
+          }}
+          inputAriaLabel="Editable title input field"
+          heading="h1"
+          size="s"
+          isInvalid={hasErrors}
+          isLoading={isLoading}
+          isReadOnly={!permissions.update}
+          onSave={(value) => {
+            return onClickSubmit(value);
+          }}
+          startWithEditOpen={editMode}
+          data-test-subj="header-page-title"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        {releasePhase === 'experimental' && <TitleExperimentalBadge />}
+        {releasePhase === 'beta' && <TitleBetaBadge />}
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 EditableTitleComponent.displayName = 'EditableTitle';