From 5ea2dbf22a93912ce33d0870862d80a0ce665330 Mon Sep 17 00:00:00 2001
From: Christopher Gurnee <chris@gurneeconsulting.net>
Date: Tue, 25 Jan 2022 17:51:54 -0500
Subject: [PATCH] Remove focus from option if changed by mouse click

---
 src/pages/thread/SortBy.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/thread/SortBy.js b/src/pages/thread/SortBy.js
index 80a7e58..26ae9a9 100644
--- a/src/pages/thread/SortBy.js
+++ b/src/pages/thread/SortBy.js
@@ -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>