He vinculado un onBlur en mi área de textarea para difuminar la entrada y esencialmente ocultarla si el usuario hace clic en cualquier lugar fuera de ella.

Mi función para editar un comentario:

 <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>

El problema que tengo es que he colocado mi span dentro de mi input con position: absolute . Si hago clic en el span la entrada se vuelve borrosa y mi función handleEditPost no se activa. Todavía quiero que la entrada se desenfoque, pero necesito que mi función se ejecute primero. Cualquier consejo sería genial.

onBlurEditar

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

manejarEditarPublicar

 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 } }