From ee1c9efb3e2d3f014af2bdd730a5e3a9e1629278 Mon Sep 17 00:00:00 2001
From: David Uhlmann <dib542@gmail.com>
Date: Thu, 25 Apr 2024 19:01:36 +1000
Subject: [PATCH 1/5] fix: remove blur timeout from SelectInput container, use
 focusout

---
 .../inputs/SelectInput/SelectInput.tsx        | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/inputs/SelectInput/SelectInput.tsx b/src/components/inputs/SelectInput/SelectInput.tsx
index ab722dc3a..be659f552 100644
--- a/src/components/inputs/SelectInput/SelectInput.tsx
+++ b/src/components/inputs/SelectInput/SelectInput.tsx
@@ -1,6 +1,6 @@
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import Drawer from '../../Drawer';
 import RadioInput from '../../RadioInput';
 import { OptionProps, RadioInputProps } from '../../RadioInput/RadioInput';
@@ -87,13 +87,34 @@ export default function SelectInput<T>({
     () => setExpanded((expanded) => !expanded),
     []
   );
-  const close = useCallback(() => setTimeout(() => setExpanded(false), 1), []);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    function handleClickOutside() {
+      const activeElement = document.activeElement;
+      if (!activeElement || !containerRef.current?.contains(activeElement)) {
+        setExpanded(false);
+      }
+    }
+    // Bind the event listener to document
+    if (expanded) {
+      // use focusout instead of blur because blur don't not always bubble
+      // - https://www.quirksmode.org/dom/events/blurfocus.html
+      // - https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
+      document.addEventListener('focusout', handleClickOutside);
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener('focusout', handleClickOutside);
+      };
+    }
+  }, [expanded]);
+
   return (
     <div
+      ref={containerRef}
       className={['select-input', className, expanded && 'expanded']
         .filter(Boolean)
         .join(' ')}
-      onBlur={close}
     >
       <button
         className="select-input-selection row flex flex-centered"

From 234005eeeb379436b1ab7f23f4698de3d1640f38 Mon Sep 17 00:00:00 2001
From: David Uhlmann <dib542@gmail.com>
Date: Thu, 25 Apr 2024 19:20:10 +1000
Subject: [PATCH 2/5] fix: improve tabbing behavior within SelectInput
 container

---
 src/components/inputs/SelectInput/SelectInput.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/inputs/SelectInput/SelectInput.tsx b/src/components/inputs/SelectInput/SelectInput.tsx
index be659f552..718b1b438 100644
--- a/src/components/inputs/SelectInput/SelectInput.tsx
+++ b/src/components/inputs/SelectInput/SelectInput.tsx
@@ -99,12 +99,22 @@ export default function SelectInput<T>({
     // Bind the event listener to document
     if (expanded) {
       // use focusout instead of blur because blur don't not always bubble
+      // use focusin instead of focusout because tabbing to a child triggers
+      // "focusout" with the document.body as the activeElement
+      // use click and keydown and touchstart to catch start of all input types
       // - https://www.quirksmode.org/dom/events/blurfocus.html
+      // - https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event
       // - https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
-      document.addEventListener('focusout', handleClickOutside);
+      document.addEventListener('focusin', handleClickOutside);
+      document.addEventListener('click', handleClickOutside);
+      document.addEventListener('keydown', handleClickOutside);
+      document.addEventListener('touchstart', handleClickOutside);
       return () => {
         // Unbind the event listener on clean up
-        document.removeEventListener('focusout', handleClickOutside);
+        document.removeEventListener('focusin', handleClickOutside);
+        document.removeEventListener('click', handleClickOutside);
+        document.removeEventListener('keydown', handleClickOutside);
+        document.removeEventListener('touchstart', handleClickOutside);
       };
     }
   }, [expanded]);

From f5cf20f77408c0ca5595614528181564d7083082 Mon Sep 17 00:00:00 2001
From: David Uhlmann <dib542@gmail.com>
Date: Thu, 25 Apr 2024 19:23:40 +1000
Subject: [PATCH 3/5] fix: remove SelectInput options as tabbable when not in
 view

---
 src/components/RadioInput/RadioInput.tsx          | 3 +++
 src/components/inputs/SelectInput/SelectInput.tsx | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/components/RadioInput/RadioInput.tsx b/src/components/RadioInput/RadioInput.tsx
index ae2e37cb8..0c2d793b4 100644
--- a/src/components/RadioInput/RadioInput.tsx
+++ b/src/components/RadioInput/RadioInput.tsx
@@ -8,6 +8,7 @@ export interface OptionProps<T> {
 }
 export interface RadioInputProps<T> {
   inputType?: 'radio' | 'checkbox';
+  disabled?: boolean;
   OptionComponent?: React.ElementType<OptionProps<T>>;
   OptionContainerComponent?: React.ElementType;
   onChange?: (value: T, index: number) => void;
@@ -37,6 +38,7 @@ export default function RadioInput<T>({
   list,
   maxColumnCount,
   value,
+  disabled,
   name,
   className,
   containerClassName,
@@ -74,6 +76,7 @@ export default function RadioInput<T>({
               type={inputType}
               name={groupName}
               id={id}
+              disabled={disabled}
               checked={index === selectedIndex}
               onChange={() => onChange?.(option, index)}
               onClick={onClick}
diff --git a/src/components/inputs/SelectInput/SelectInput.tsx b/src/components/inputs/SelectInput/SelectInput.tsx
index 718b1b438..0e8383b1d 100644
--- a/src/components/inputs/SelectInput/SelectInput.tsx
+++ b/src/components/inputs/SelectInput/SelectInput.tsx
@@ -147,6 +147,7 @@ export default function SelectInput<T>({
         floating={floating}
       >
         <RadioInput<T>
+          disabled={!expanded}
           inputType="checkbox"
           className={[
             'select-input-group',

From c4e306ab4a828619498c110f3b5778c23b887249 Mon Sep 17 00:00:00 2001
From: David Uhlmann <dib542@gmail.com>
Date: Thu, 25 Apr 2024 19:38:10 +1000
Subject: [PATCH 4/5] fix: activeElement can be document.body when clicking
 select option

---
 src/components/inputs/SelectInput/SelectInput.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/inputs/SelectInput/SelectInput.tsx b/src/components/inputs/SelectInput/SelectInput.tsx
index 0e8383b1d..946e024de 100644
--- a/src/components/inputs/SelectInput/SelectInput.tsx
+++ b/src/components/inputs/SelectInput/SelectInput.tsx
@@ -90,9 +90,10 @@ export default function SelectInput<T>({
 
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    function handleClickOutside() {
-      const activeElement = document.activeElement;
-      if (!activeElement || !containerRef.current?.contains(activeElement)) {
+    function handleClickOutside(e: Event) {
+      // only collapse if new focus doesn't exist or is outside of the container
+      const target = e.target as Element | null;
+      if (!target?.nodeType || !containerRef.current?.contains(target)) {
         setExpanded(false);
       }
     }

From 256ee9d17eb99aa7fb320798ac8fdd040e0fc8b6 Mon Sep 17 00:00:00 2001
From: David Uhlmann <dib542@gmail.com>
Date: Thu, 25 Apr 2024 23:07:12 +1000
Subject: [PATCH 5/5] style: improve variable names

---
 src/components/inputs/SelectInput/SelectInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/inputs/SelectInput/SelectInput.tsx b/src/components/inputs/SelectInput/SelectInput.tsx
index 946e024de..9bbd6ff9c 100644
--- a/src/components/inputs/SelectInput/SelectInput.tsx
+++ b/src/components/inputs/SelectInput/SelectInput.tsx
@@ -90,9 +90,9 @@ export default function SelectInput<T>({
 
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    function handleClickOutside(e: Event) {
+    function handleClickOutside(event: Event) {
       // only collapse if new focus doesn't exist or is outside of the container
-      const target = e.target as Element | null;
+      const target = event.target as Element | null;
       if (!target?.nodeType || !containerRef.current?.contains(target)) {
         setExpanded(false);
       }