Use auto-closable hook in ComboboxList

Paul-Ladyman · Sep 10, 2023 · a7db12e · a7db12e
1 parent f32447b
commit a7db12e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dnd-battle-tracker",
-  "version": "5.81.0",
+  "version": "5.82.0",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.16",

diff --git a/src/components/creature/toolbar/CreatureToolbar.js b/src/components/creature/toolbar/CreatureToolbar.js
@@ -52,10 +52,7 @@ export default function CreatureToolbar({
 
   const onEscapeToClose = (e) => {
     const targetIsNotesTool = e.target.getAttribute('id') === `combobox-notes-wrapper-${id}`;
-    const notesToolEmpty = e.target.getAttribute('value') === '';
-    const notesToolClosed = e.target.getAttribute('aria-expanded') === 'false';
-    const shouldEscape = targetIsNotesTool ? notesToolEmpty && notesToolClosed : true;
-    if (shouldEscape) {
+    if (!targetIsNotesTool) {
       setSelectedButton(null);
       focusButton(focusedButton);
     }

diff --git a/src/components/form/ComboboxList.js b/src/components/form/ComboboxList.js
@@ -1,10 +1,11 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import isHotkey from 'is-hotkey';
 import Input from './Input';
 import DropdownOption from './DropdownOption';
 import ComboboxLabel from './ComboboxLabel';
 import { hotkeys } from '../../hotkeys/hotkeys';
 import useNavigableList from '../widgets/useNavigableList';
+import useAutoClosable from '../widgets/useAutoClosable';
 
 export default function ComboboxList({
   value,
@@ -57,6 +58,10 @@ export default function ComboboxList({
     setExpanded(!expanded);
   };
 
+  const close = () => {
+    setExpanded(false);
+  };
+
   const handleChange = (event) => {
     if (!expanded) setExpanded(true);
     if (focusedItem !== null) setFocusedItem(null);
@@ -121,8 +126,6 @@ export default function ComboboxList({
       if (isHotkey(hotkeys.dropdownNavOpen, e)) setExpanded(true);
     }
 
-    if (isHotkey(hotkeys.dropdownEscape, e)) handleEscape();
-
     if (isHotkey('enter', e)) {
       e.preventDefault();
       handleKeyboardSubmit();
@@ -133,39 +136,13 @@ export default function ComboboxList({
     }
   };
 
-  useEffect(() => {
-    if (expanded) {
-      const clickHandler = (e) => {
-        const comboBox = document.getElementById(id);
-        const clickInComboBox = comboBox && comboBox.contains(e.target);
-        if (expanded && !clickInComboBox) {
-          setExpanded(false);
-        }
-      };
-      document.addEventListener('click', clickHandler);
-
-      return () => document.removeEventListener('click', clickHandler);
-    }
-    return undefined;
-  }, [expanded]);
-
-  useEffect(() => {
-    if (expanded) {
-      const comboBox = document.getElementById(id);
-      const focusHandler = (e) => {
-        const focusOutsideComboBox = e.relatedTarget !== null
-          && comboBox
-          && !comboBox.contains(e.relatedTarget);
-        if (expanded && focusOutsideComboBox) {
-          setExpanded(false);
-        }
-      };
-      comboBox.addEventListener('focusout', focusHandler);
-
-      return () => comboBox.removeEventListener('focusout', focusHandler);
-    }
-    return undefined;
-  }, [expanded]);
+  useAutoClosable({
+    wrapperId: id,
+    onClickToClose: close,
+    onTabToClose: close,
+    onEscapeToClose: handleEscape,
+    onEscapeDeps: [showList],
+  });
 
   return (
     <div

diff --git a/src/components/widgets/useAutoClosable.js b/src/components/widgets/useAutoClosable.js
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 export default function useAutoClosable({
-  closable,
+  closable = true,
   wrapperId,
   onClickToClose,
   onTabToClose,