I have bound an onBlur on my textarea to blur the input and essentially hide it if the user clicks anywhere outside of it.

My function to edit a comment:

              <div key={idx} className='comments-container__cols__comments' style={toggleItem ? null : { opacity: '0.3' }}>
                {isEditing.includes(comment) ? (
                  <div className='textarea-container'>
                    <textarea
                      autoFocus
                      id='text-area-reports-comments'
                      type='text'
                      value={editingPost}
                      onBlur={onBlurEdit}
                      onChange={(e) => setEditingPost(e.target.value)}
                    />
                    <span ref={submitBtnRef}>
                      <RiSendPlaneFill onClick={handleEditPost} />
                    </span>
                  </div>

The problem I have is that I have positioned my span inside my input with position: absolute. If I click on the span the input gets blurred and my handleEditPost function doesn't fire. I still do want the input to blur but I need my function to run first. Any advice would be great.

onBlurEdit

  const onBlurEdit = () => {
    setIsEditing([])
    setEditingPost('')
  }

handleEditPost

  const handleEditPost = async () => {
    if (editingPost.length > 3) {
      try {
        const idx = comments.indexOf(isEditing[0])
        let newArr = [...comments]

        const { data } = await editVolunteerReport(isEditing[0].id, editingPost)

        newArr[idx] = data
        setComments(newArr)

        onBlurEdit()
      } catch (err) {
        console.log(err.message)
      }
    } else {
      return
    }
  }