overleaf-cep/services/web/frontend/js/features/review-panel-new/hooks/use-submittable-text-input.ts
Domagoj Kriskovic 3a918a58e5 Prevent submitting comment on enter if input is empty (#23221)
* Prevent submitting comment on enter if input is empty

* check for content in keyPress event

GitOrigin-RevId: 1abef229782265836a49d74aa93625797d50dc3a
2025-01-30 09:05:26 +00:00

31 lines
803 B
TypeScript

import { useCallback, useState, Dispatch, SetStateAction } from 'react'
export default function useSubmittableTextInput(
handleSubmit: (
content: string,
setContent: Dispatch<SetStateAction<string>>
) => void
) {
const [content, setContent] = useState('')
const handleKeyPress = useCallback(
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
e.preventDefault()
if (content.trim().length > 0) {
handleSubmit(content, setContent)
}
}
},
[content, handleSubmit]
)
const handleChange = useCallback(
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
setContent(e.target.value)
},
[]
)
return { handleChange, handleKeyPress, content }
}