Fix returning focus on title when clicked below form blocks

[MAILPOET-2451]

assets/js/src/form_editor/components/form_title.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
 import classnames from 'classnames';
 import MailPoet from 'mailpoet';
@@ -15,6 +15,27 @@ export default () => {
   });
   const { changeFormName } = useDispatch('mailpoet-form-editor');
   const { clearSelectedBlock } = useDispatch('core/block-editor');
+
+  /**
+   * Sometimes the focus is not triggered by clicking the title itself but by
+   * <WritingFlow /> which automatically search for some element to focus in case
+   * user clicks on space below blocks.
+   * We don't want to switch focus to the title in such a case
+   * so we just dispatch clearSelectedBlock().
+   */
+  const textArea = useRef(null);
+  const handleOnFocus = (e) => {
+    clearSelectedBlock();
+    const focusWasRedirected = e.relatedTarget
+      && e.relatedTarget.className
+      && e.relatedTarget.className.includes('editor-writing-flow__click-redirect');
+    if (focusWasRedirected && textArea.current) {
+      textArea.current.blur();
+      return;
+    }
+    setIsSelected(true);
+  };
+
   return (
     <div className="editor-post-title">
       <div className={titleClass}>
@@ -24,14 +45,12 @@ export default () => {
           </label>
           <Textarea
             id="form-title"
+            ref={textArea}
             className="editor-post-title__input"
             placeholder={MailPoet.I18n.t('addFormName')}
             data-automation-id="form_title_input"
             rows={1}
-            onFocus={() => {
+            onFocus={handleOnFocus}
-              setIsSelected(true);
-              clearSelectedBlock();
-            }}
             onKeyPress={() => setIsSelected(false)}
             onBlur={() => setIsSelected(false)}
             onChange={(e) => changeFormName(e.target.value)}