Issue #9: Making the dropdown menu close only once clicked outside

The toggles are still a bit sensitive around the checkbox element, but I've at least adjusted the autoclose so the user has some visual clue that the toggle was or was not successful. This will also allow people to more easily adjust multiple filters at any one time. Signed-off-by: Elliot J. Voris <[email protected]>
ElliotFriend · Aug 8, 2021 · ef23bae · ef23bae
1 parent c926e03
commit ef23bae
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/components/Nav/Nav.js b/src/components/Nav/Nav.js
@@ -61,7 +61,7 @@ export default function Nav(props) {
           <div className="my-auto col text-end">
             { quester.pubkey && !quester.export ?
             <div className="dropdown">
-              <button className="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+              <button className="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                 Filter
               </button>
               <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink">
@@ -76,16 +76,16 @@ export default function Nav(props) {
                 <li>
                   <button className="dropdown-item">
                     <div className="form-check form-switch">
-                    <input onChange={toggleEventBadges} className="form-check-input" type="checkbox" id="includeEvents" checked={quester.events} />
-                    <label className="form-check-label" for="includeEvents">Include special event badges?</label>
+                      <input onChange={toggleEventBadges} className="form-check-input" type="checkbox" id="includeEvents" checked={quester.events} />
+                      <label className="form-check-label" for="includeEvents">Include special event badges?</label>
                     </div>
                   </button>
                 </li>
                 <li>
                   <button className="dropdown-item">
                     <div className="form-check form-switch">
-                    <input onChange={toggleMissingBadges} className="form-check-input" type="checkbox" id="includeMissing" checked={quester.missing} />
-                    <label className="form-check-label" for="includeMissing">Include missing badges?</label>
+                      <input onChange={toggleMissingBadges} className="form-check-input" type="checkbox" id="includeMissing" checked={quester.missing} />
+                      <label className="form-check-label" for="includeMissing">Include missing badges?</label>
                     </div>
                   </button>
                 </li>