Remove focus from option if changed by mouse click

This commit is contained in:
Christopher Gurnee 2022-01-25 17:51:54 -05:00
parent be94243cab
commit 5ea2dbf22a

View file

@ -3,12 +3,16 @@ import {connect, sort, filter, maxCommentsLimit} from '../../state'
const sortBy = props => {
const [reloadVisible, setReloadVisible] = useState(false)
let usedMouse;
return (
<div id='comment-sort'>
<label htmlFor='commentSort'>sorted by:</label>
<span className='space' />
<select id='commentSort' onChange={e => props.global.setCommentSort(e.target.value)} defaultValue={props.global.state.commentSort}>
<select id='commentSort' defaultValue={props.global.state.commentSort}
onMouseDown={() => usedMouse = true}
onKeyDown= {() => usedMouse = false}
onChange= {e => {props.global.setCommentSort(e.target.value); if (usedMouse) e.target.blur()}}>
<option value={sort.top}>top</option>
<option value={sort.bottom}>bottom</option>
<option value={sort.new}>new</option>
@ -17,7 +21,10 @@ const sortBy = props => {
<span className='space' />
<label htmlFor='commentFilter'>show:</label>
<span className='space' />
<select id='commentFilter' onChange={e => props.global.setCommentFilter(e.target.value)} defaultValue={props.global.state.commentFilter}>
<select id='commentFilter' defaultValue={props.global.state.commentFilter}
onMouseDown={() => usedMouse = true}
onKeyDown= {() => usedMouse = false}
onChange= {e => {props.global.setCommentFilter(e.target.value); if (usedMouse) e.target.blur()}}>
<option value={filter.all}>All comments</option>
<option value={filter.removedDeleted}>Removed and deleted</option>
<option value={filter.removed}>Removed</option>