diff --git a/client/src/components/VotingComponents/VotingPopup.jsx b/client/src/components/VotingComponents/VotingPopup.jsx index d23b409a..def04853 100644 --- a/client/src/components/VotingComponents/VotingPopup.jsx +++ b/client/src/components/VotingComponents/VotingPopup.jsx @@ -1,6 +1,6 @@ /* eslint-disable react/prop-types */ import { makeStyles } from '@material-ui/core/styles' -import { useState, useEffect } from 'react' +import { useState, useEffect, useRef } from 'react' import { Paper, @@ -50,6 +50,8 @@ const useStyles = makeStyles((theme) => ({ input: { color: '#3c4858cc', paddingBottom: 1, + minHeight: 50, + fontSize: '1rem', '&::before': { pointerEvents: 'auto', }, @@ -71,6 +73,7 @@ const VotingPopup = ({ const [expand, setExpand] = useState({ open: false, type: '' }) const [comment, setComment] = useState('') const [checkWindowWidth, setCheckWindowWidth] = useState(true) + const commentInputRef = useRef(null) const handleWindowSizeChange = () => { if (window.innerWidth < 400) { @@ -130,6 +133,10 @@ const VotingPopup = ({ const selectionPopover = document.querySelector('#popButtons') if (selectionPopover) { const handleMouseDown = (e) => { + const tag = e.target.tagName.toLowerCase() + if (tag === 'input' || tag === 'textarea') { + return + } e.preventDefault() } selectionPopover.addEventListener('mousedown', handleMouseDown) @@ -141,6 +148,17 @@ const VotingPopup = ({ } }, []) + useEffect(() => { + if (expand.open && expand.type === 'comment' && commentInputRef.current) { + const timer = setTimeout(() => { + if (commentInputRef.current) { + commentInputRef.current.focus() + } + }, 300) + return () => clearTimeout(timer) + } + }, [expand.open, expand.type]) + let inputValue = comment const isComment = expand.type === 'comment' @@ -281,6 +299,7 @@ const VotingPopup = ({