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