Fix returning focus on title when clicked below form blocks

[MAILPOET-2451]
This commit is contained in:
Rostislav Wolny
2019-12-03 13:35:32 +01:00
committed by Jack Kitterhing
parent e9ee0323d3
commit 60d528da84

View File

@@ -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={() => {
setIsSelected(true);
clearSelectedBlock();
}}
onFocus={handleOnFocus}
onKeyPress={() => setIsSelected(false)}
onBlur={() => setIsSelected(false)}
onChange={(e) => changeFormName(e.target.value)}