-1

I have a form which performs an event on submit.

The form contains a textarea, that when you click on it, the submit button appears, and when you click out it disappears (using onFocus and onBlur for this to flag variable 'showSubmit'):

<form id="commentsForm" onSubmit={handleSubmitForm}>
      ...
         <textarea
             onFocus={onFocusShowSubmit}
             onBlur={onBlurHideSubmit}
             id="comment" name="comment" type="text" required></textarea>
          
         {showSubmit
             ?
             <button type="submit">Post Comment</button>
             : null}
</form>

The onBlur event is blocking the button to be clicked and therefore to submit the form.

I read about using onMouseDown event in the button, and it does work, but it does not capture the form event. And I really need to pass the form event to the "handleSubmitForm" to be able to retrieve the form data..

Does anybody know how I could work this out? Thanks!

letie
  • 704
  • 2
  • 10
  • 20

1 Answers1

-1

I reproduced this and solved it this way:

import React, { useState } from "react";

function Q1() {
  const [showSubmit, setShowSubmit] = useState(false);
  const [text, setText] = useState();

  const onFocusShowSubmit = () => {
    setShowSubmit(true);
  };

  const handleSubmitForm = (e) => {
    alert("Form Sent");
  };
  return (
    <div>
      <form id="commentsForm" onSubmit={handleSubmitForm}>
        ...
        <textarea
          onFocus={onFocusShowSubmit}
          onBlur={
            text && text.length >= 1
              ? () => setShowSubmit(true)
              : () => setShowSubmit(false)
          }
          id="comment"
          name="comment"
          type="text"
          required
          onChange={(e) => setText(e.target.value)}
        >
          {text}
        </textarea>
        {showSubmit ? <button type="submit">Post Comment</button> : null}
      </form>
    </div>
  );
}

export default Q1;
Joseph A
  • 12
  • 3
  • Howdy! Code-only answers are typically frowned upon and don't really help the original poster or other future visitors. Consider adding some context to your answer! – sesamechicken Jun 11 '21 at 20:10
  • @sesamechicken Yes my thoughts exactly. This helped me with the solution, but I had to spend some time figuring out what he did and why. And also I had to add setText(null) and setShowSubmit(false) in the submit function in order for the textarea dynamic to get back working. But other than that, Joseph answer was helpful. – letie Jun 11 '21 at 23:41
  • 2
    I am new here and I apologize for not explaining what I did, Will do better next time, I am happy the code helped you. – Joseph A Jun 13 '21 at 22:01