From 8eab620b65a7f8e48fd04e7101556a2e86f73145 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Mon, 14 Nov 2022 13:24:11 -0500
Subject: [PATCH] feat: auto-resize width of input and allow save onBlur (#144)

---
 .../components/TitleHeader/EditableHeader.jsx | 35 +++++++++++--------
 .../EditableHeader.test.jsx.snap              | 11 +++++-
 .../components/TitleHeader/hooks.js           | 11 ++++--
 .../components/TitleHeader/hooks.test.js      |  4 ++-
 4 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
index b6e905313..816ecf8cf 100644
--- a/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
@@ -11,20 +11,27 @@ export const EditableHeader = ({
   inputRef,
   localTitle,
   cancelEdit,
-}) => (
-  <Form.Group>
-    <Form.Control
-      style={{ 'padding-inline-end': 'calc(1rem + 84px)' }}
-      autoFocus
-      trailingElement={<EditConfirmationButtons {...{ updateTitle, cancelEdit }} />}
-      onChange={handleChange}
-      onKeyDown={handleKeyDown}
-      placeholder="Title"
-      ref={inputRef}
-      value={localTitle}
-    />
-  </Form.Group>
-);
+}) => {
+  const width = localTitle.length * 8 + 200;
+  return (
+    <Form.Group
+      style={{ 'min-width': '200px', width: `${width}px` }}
+      className="mw-100"
+      onBlur={(e) => updateTitle(e)}
+    >
+      <Form.Control
+        style={{ 'padding-inline-end': 'calc(1rem + 84px)' }}
+        autoFocus
+        trailingElement={<EditConfirmationButtons {...{ updateTitle, cancelEdit }} />}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder="Title"
+        ref={inputRef}
+        value={localTitle}
+      />
+    </Form.Group>
+  );
+};
 EditableHeader.defaultProps = {
   inputRef: null,
 };
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap
index 83d047269..557b7bb03 100644
--- a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap
@@ -1,7 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EditableHeader snapshot snapshot 1`] = `
-<Form.Group>
+<Form.Group
+  className="mw-100"
+  onBlur={[Function]}
+  style={
+    Object {
+      "min-width": "200px",
+      "width": "320px",
+    }
+  }
+>
   <Form.Control
     autoFocus={true}
     onChange={[MockFunction args.handleChange]}
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/hooks.js b/src/editors/containers/EditorContainer/components/TitleHeader/hooks.js
index 91c32ae37..2f6ae11ab 100644
--- a/src/editors/containers/EditorContainer/components/TitleHeader/hooks.js
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/hooks.js
@@ -25,9 +25,14 @@ export const hooks = {
     const title = useSelector(selectors.app.displayTitle);
     const [localTitle, setLocalTitle] = module.state.localTitle(title);
     return {
-      updateTitle: () => {
-        dispatch(actions.app.setBlockTitle(localTitle));
-        stopEditing();
+      updateTitle: (e) => {
+        if (localTitle.length <= 0) {
+          setLocalTitle(title);
+          stopEditing();
+        } else if (!e.currentTarget.contains(e.relatedTarget)) {
+          dispatch(actions.app.setBlockTitle(localTitle));
+          stopEditing();
+        }
       },
       handleChange: (e) => setLocalTitle(e.target.value),
       cancelEdit: () => {
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/hooks.test.js b/src/editors/containers/EditorContainer/components/TitleHeader/hooks.test.js
index 2a12186e5..85acc89a0 100644
--- a/src/editors/containers/EditorContainer/components/TitleHeader/hooks.test.js
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/hooks.test.js
@@ -74,7 +74,9 @@ describe('TitleHeader hooks', () => {
       });
       describe('updateTitle hook', () => {
         it('calls setBlockTitle with localTitle, and stopEditing', () => {
-          output.updateTitle();
+          const div = document.createElement('div');
+          const mockEvent = { currentTarget: div };
+          output.updateTitle(mockEvent);
           expect(dispatch).toHaveBeenCalledWith(actions.app.setBlockTitle(output.localTitle));
           expect(stopEditing).toHaveBeenCalled();
         });