Prevent accidental miss-clicks outside multi-select checkboxes

Author: acelaya

src/components/input/Checkbox.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from 'preact';
+import type { JSX, Ref } from 'preact';
 import { useState } from 'preact/hooks';
 
 import type { CompositeProps, IconComponent } from '../../types';
@@ -20,6 +20,11 @@ type ComponentProps = {
   checkedIcon?: IconComponent;
   /** type is always `checkbox` */
   type?: never;
+
+  /** Optional extra CSS classes appended to the container's className */
+  containerClasses?: string | string[];
+  /** Ref associated with the component's container */
+  containerRef?: Ref<HTMLLabelElement | undefined>;
 };
 
 export type CheckboxProps = CompositeProps &

src/components/input/RadioButton.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from 'preact';
+import type { JSX, Ref } from 'preact';
 
 import type { CompositeProps, IconComponent } from '../../types';
 import { RadioCheckedIcon, RadioIcon } from '../icons';
@@ -13,6 +13,11 @@ type ComponentProps = {
   checkedIcon?: IconComponent;
   /** type is always `radio` */
   type?: never;
+
+  /** Optional extra CSS classes appended to the container's className */
+  containerClasses?: string | string[];
+  /** Ref associated with the component's container */
+  containerRef?: Ref<HTMLLabelElement | undefined>;
 };
 
 export type RadioButtonProps = CompositeProps &

src/components/input/Select.tsx

@@ -72,7 +72,11 @@ function SelectOption<T>({
   elementRef,
 }: SelectOptionProps<T>) {
   const checkboxRef = useRef<HTMLElement | null>(null);
+  const checkboxContainerRef = useRef<HTMLLabelElement | null>(null);
   const optionRef = useSyncedRef(elementRef);
+  const eventTriggeredInCheckbox = (e: Event) =>
+    e.target === checkboxRef.current ||
+    e.target === checkboxContainerRef.current;
 
   const selectContext = useContext(SelectContext);
   if (!selectContext) {
@@ -150,9 +154,12 @@ function SelectOption<T>({
         classes,
       )}
       onClick={e => {
-        // Do not invoke callback if clicked element is the checkbox, as it has
-        // its own event handler.
-        if (!disabled && e.target !== checkboxRef.current) {
+        if (
+          !disabled &&
+          // Do not invoke callback if clicked element is the checkbox or its
+          // container, as it has its own event handler.
+          !eventTriggeredInCheckbox(e)
+        ) {
           selectOneValue();
         }
       }}
@@ -163,9 +170,9 @@ function SelectOption<T>({
 
         if (
           ['Enter', ' '].includes(e.key) &&
-          // Do not invoke callback if event triggers in checkbox, as it has its
-          // own event handler.
-          e.target !== checkboxRef.current
+          // Do not invoke callback if event triggered in the checkbox or its
+          // container, as it has its own event handler.
+          !eventTriggeredInCheckbox(e)
         ) {
           e.preventDefault();
           selectOneValue();
@@ -183,46 +190,57 @@ function SelectOption<T>({
     >
       <div
         className={classnames(
-          'w-full flex justify-between items-center gap-3',
-          'rounded py-2 px-3',
+          // Make items stretch so that all have the same height. This is
+          // important for multi-selects, where the checkbox actionable surface
+          // should span to the very edges of the option containing it.
+          'flex justify-between items-stretch',
+          'w-full rounded',
           {
             'hover:bg-grey-1 group-focus-visible:ring': !disabled,
             'bg-grey-1 hover:bg-grey-2': selected,
           },
         )}
       >
-        {optionChildren(children, { selected, disabled })}
+        <div className="flex items-center py-2 pl-3">
+          {optionChildren(children, { selected, disabled })}
+        </div>
         {!multiple && (
-          <CheckIcon
-            className={classnames('text-grey-6 scale-125', {
-              // Make the icon visible/invisible, instead of conditionally
-              // rendering it, to ensure consistent spacing among selected and
-              // non-selected options
-              'opacity-0': !selected,
-            })}
-          />
-        )}
-        {multiple && (
-          <div
-            className={classnames('scale-125', {
-              'text-grey-6': selected,
-              'text-grey-3 hover:text-grey-6': !selected,
-            })}
-          >
-            <Checkbox
-              checked={selected}
-              checkedIcon={CheckboxCheckedFilledIcon}
-              elementRef={checkboxRef}
-              onChange={toggleValue}
-              onKeyDown={e => {
-                if (e.key === 'ArrowLeft') {
-                  e.preventDefault();
-                  optionRef.current?.focus();
-                }
-              }}
+          <div className="flex items-center py-2 px-3">
+            <CheckIcon
+              className={classnames('text-grey-6 scale-125', {
+                // Make the icon visible/invisible, instead of conditionally
+                // rendering it, to ensure consistent spacing among selected and
+                // non-selected options
+                'opacity-0': !selected,
+              })}
             />
           </div>
         )}
+        {multiple && (
+          <Checkbox
+            containerClasses={classnames(
+              'flex items-center py-2 px-3',
+              // The checkbox is sized based on the container's font size. Make
+              // it a bit larger.
+              'text-lg',
+              {
+                'text-grey-6': selected,
+                'text-grey-3 hover:text-grey-6': !selected,
+              },
+            )}
+            checked={selected}
+            checkedIcon={CheckboxCheckedFilledIcon}
+            elementRef={checkboxRef}
+            containerRef={checkboxContainerRef}
+            onChange={toggleValue}
+            onKeyDown={e => {
+              if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                optionRef.current?.focus();
+              }
+            }}
+          />
+        )}
       </div>
     </li>
   );

src/components/input/ToggleInput.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import type { JSX } from 'preact';
+import type { JSX, Ref } from 'preact';
 
 import type { CompositeProps, IconComponent } from '../../types';
 import { downcastRef } from '../../util/typing';
@@ -13,6 +13,11 @@ type ComponentProps = {
   checkedIcon: IconComponent;
 
   type: 'checkbox' | 'radio';
+
+  /** Optional extra CSS classes appended to the container's className */
+  containerClasses?: string | string[];
+  /** Ref associated with the component's container */
+  containerRef?: Ref<HTMLLabelElement | undefined>;
 };
 
 export type ToggleInputProps = CompositeProps &
@@ -27,6 +32,7 @@ export type ToggleInputProps = CompositeProps &
 export default function ToggleInput({
   children,
   elementRef,
+  containerRef,
 
   checked,
   icon: UncheckedIcon,
@@ -36,20 +42,26 @@ export default function ToggleInput({
   onChange,
   id,
   type,
+  containerClasses,
   ...htmlAttributes
 }: ToggleInputProps) {
   const Icon = checked ? CheckedIcon : UncheckedIcon;
 
   return (
     <label
-      className={classnames('relative flex items-center gap-x-1.5', {
-        'cursor-pointer': !disabled,
-        'opacity-70': disabled,
-      })}
+      className={classnames(
+        'relative flex items-center gap-x-1.5',
+        {
+          'cursor-pointer': !disabled,
+          'opacity-70': disabled,
+        },
+        containerClasses,
+      )}
       htmlFor={id}
       data-composite-component={
         type === 'checkbox' ? 'Checkbox' : 'RadioButton'
       }
+      ref={downcastRef(containerRef)}
     >
       <input
         {...htmlAttributes}