feat: auto-resize width of input and allow save onBlur (#144)

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,
 };

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]}

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: () => {

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();
         });