Fix returning focus on title when clicked below form blocks
[MAILPOET-2451]
This commit is contained in:
committed by
Jack Kitterhing
parent
e9ee0323d3
commit
60d528da84
@@ -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)}
|
||||
|
Reference in New Issue
Block a user