react / react-draft-wysiwyg: How to determine truly is blurred?

user_6269559 0
Viewed 115

The attached graphic shows my issue. If I click outside of the content, but inside the textarea, which you can see a light grey border around, the onBlur event is fired.

I've tried to capture the event and prevent this behaviour using target, but the event looks the same if you click way outside the box - where I want onBlur to fire.

So far using a ref has not worked either. I was hoping that would be the solution. Any ideas on how to allow a user to click anywhere within what they are seeing as the component react-draft-wysiwyg and NOT fire onBlur?

fires blur even when clicking within the visually rendered component

react-draft-wysiwyg use-ref reactjs
1 Answers

My fix, though feeling a bit hacky because of needing to handle the first onClickAway, was to elevate the onBlur call to a ClickAwayListener wrapping the Editor component like so:

<ClickAwayListener onClickAway={() => {
    // Moving onBlur up to support clicking anywhere in component w/o blurring.
    // Handle onClickAway firing once on focus of editor textarea.
    if (firstClick) {
      setFirstClick(false);
    } else {
      onBlur();
    }
  }}
>
  <Editor
    // do not use here: onBlur={onBlur}
    // other props
  />
</ClickAwayListener>
user_62695590
Related