I have a textarea with onBlur() function, and also a button with onClick() function,

The button will be visible only if the textarea is focussed, and when clicked on the button I want to display some text.

The problem is the textarea onBlur() function is executed before the button onClick() function.

How can I prevent this from happening? If you could please help me with this, it would be greatly appreciated.

Please refer codesandbox

CodePudding user response：

The Problem is that the onBlur is a default behaviour of the textarea. It will be triggered as soon as you click anywhere outside the textarea.

So, to achieve the desired behaviour, change the state on button click rather than on onBlur. I have attached the snippet below, Hope this will help.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [editorFocus, setEditorFocus] = useState(false);
  const [textVisibility, setTextVisibility] = useState(false);
  return (
    <div className="App">
      <textarea
        onFocus={() => {
          setEditorFocus(true);
          setTextVisibility(false);
        }}
        // onBlur={() => setEditorFocus(false)}
      ></textarea>
      {editorFocus && (
        <button
          onClick={() => {
            setTextVisibility(true);
            setEditorFocus(false);
          }}
        >
          Click me!
        </button>
      )}
      {textVisibility && <h1>Hello World!</h1>}
    </div>
  );
}

sandbox link

CodePudding user response：

You could try adding an event listener that checks the active item every time the user clicks. If the tagName of the active element is BUTTON or TEXTAREA the editorFocus can be set to true, if not than set the editorFocus to false.

Hope this helps!

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [editorFocus, setEditorFocus] = useState(false);
  const [textVisibility, setTextVisibility] = useState(false);

  const clickCheck = (e) => {
    // checks to see if the active element has a tagName of "button or textarea"
    if (
      document.activeElement.tagName === "BUTTON" ||
      document.activeElement.tagName === "TEXTAREA"
    ) {
      setEditorFocus(true);
    } else {
      setEditorFocus(false);
    }
  };

  // Adds event listener that calls the clickCheck function every time the user clicks
  document.addEventListener("click", () => clickCheck());

  return (
    <div className="App" id="div">
      <div>
        <textarea></textarea>
        {editorFocus && (
          <button
            onClick={() => {
              setTextVisibility(true);
            }}
          >
            Click me!
          </button>
        )}
      </div>
      {textVisibility && <h1>Hello World!</h1>}
    </div>
  );
}

code sandbox