Bug: Demo of keyboard event leaks

.storybook/main.js

@@ -7,6 +7,7 @@ module.exports = {
   ],
 
   addons: [
+    "@storybook/addon-interactions",
     "@storybook/addon-actions",
     "@storybook/addon-a11y",
     "@storybook/addon-controls",

packages/@react-aria/checkbox/src/useCheckbox.ts

@@ -12,10 +12,12 @@
 
 import {AriaCheckboxProps} from '@react-types/checkbox';
 import {InputHTMLAttributes, LabelHTMLAttributes, useEffect} from 'react';
+import {mergeProps} from '@react-aria/utils';
+import {privateValidationStateProp, useFormValidationState} from '@react-stately/form';
 import {RefObject, ValidationResult} from '@react-types/shared';
 import {ToggleState} from '@react-stately/toggle';
 import {useFormValidation} from '@react-aria/form';
-import {useFormValidationState} from '@react-stately/form';
+import {usePress} from '@react-aria/interactions';
 import {useToggle} from '@react-aria/toggle';
 
 export interface CheckboxAria extends ValidationResult {
@@ -61,8 +63,23 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     }
   });
 
+  // Reset validation state on label press for checkbox with a hidden input.
+  let {pressProps} = usePress({
+    isDisabled: isDisabled || isReadOnly,
+    onPress() {
+      // @ts-expect-error
+      let {[privateValidationStateProp]: groupValidationState} = props;
+
+      let {commitValidation} = groupValidationState
+      ? groupValidationState
+      : validationState;
+
+      commitValidation();
+    }
+  });
+
   return {
-    labelProps,
+    labelProps: mergeProps(labelProps, pressProps),
     inputProps: {
       ...inputProps,
       checked: isSelected,

packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx

@@ -20,15 +20,16 @@ import userEvent from '@testing-library/user-event';
 function Checkbox({checkboxGroupState, ...props}: AriaCheckboxGroupItemProps & { checkboxGroupState: CheckboxGroupState }) {
   const ref = useRef<HTMLInputElement>(null);
   const {children} = props;
-  const {inputProps} = useCheckboxGroupItem(props, checkboxGroupState, ref);
-  return <label><input ref={ref} {...inputProps} />{children}</label>;
+  props.validationBehavior ??= 'native';
+  const {inputProps, labelProps} = useCheckboxGroupItem(props, checkboxGroupState, ref);
+  return <label {...labelProps}><input ref={ref} {...inputProps} />{children}</label>;
 }
 
 function CheckboxGroup({groupProps, checkboxProps}: {groupProps: AriaCheckboxGroupProps, checkboxProps: AriaCheckboxGroupItemProps[]}) {
   const state = useCheckboxGroupState(groupProps);
-  const {groupProps: checkboxGroupProps, labelProps} = useCheckboxGroup(groupProps, state);
+  const {groupProps: checkboxGroupProps, labelProps, isInvalid} = useCheckboxGroup(groupProps, state);
   return (
-    <div {...checkboxGroupProps}>
+    <div {...checkboxGroupProps} data-invalid={isInvalid || undefined}>
       {groupProps.label && <span {...labelProps}>{groupProps.label}</span>}
       <Checkbox checkboxGroupState={state} {...checkboxProps[0]} />
       <Checkbox checkboxGroupState={state} {...checkboxProps[1]} />
@@ -281,4 +282,31 @@ describe('useCheckboxGroup', () => {
     expect(checkboxOnChangeSpy).toHaveBeenCalledTimes(0);
     expect(checkboxes[2].checked).toBeFalsy();
   });
+
+  it('should re-validate in realtime', async () => {
+    let {getByRole, getByLabelText} = render(
+      <CheckboxGroup
+        groupProps={{label: 'Favorite Pet', isRequired: true}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+
+    let checkboxGroup = getByRole('group');
+    let dragons = getByLabelText('Dragons');
+
+    await user.click(dragons);
+
+    expect(checkboxGroup).not.toHaveAttribute('data-invalid');
+
+    await user.click(dragons);
+
+    expect(checkboxGroup).toHaveAttribute('data-invalid', 'true');
+
+    await user.click(dragons);
+
+    expect(checkboxGroup).not.toHaveAttribute('data-invalid');
+  });
 });

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -256,7 +256,8 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
 
   let rowProps: DOMAttributes = mergeProps(itemProps, linkProps, {
     role: 'row',
-    onKeyDownCapture: onKeyDown,
+    onKeyDown: keyboardNavigationBehavior === 'tab' ? onKeyDown : undefined,
+    onKeyDownCapture: keyboardNavigationBehavior === 'tab' ? undefined : onKeyDown,
     onFocus,
     // 'aria-label': [(node.textValue || undefined), rowAnnouncement].filter(Boolean).join(', '),
     'aria-label': node.textValue || undefined,

packages/react-aria-components/stories/EventLeaks.stories.tsx

@@ -0,0 +1,196 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Button, GridList, GridListItem, GridListItemProps, Group, Label, Tag, TagGroup, TagList} from 'react-aria-components';
+import {CheckboxExample} from './Checkbox.stories';
+import {CheckboxGroupExample} from './CheckboxGroup.stories';
+import {ColorSwatchExample} from './ColorSwatch.stories';
+import {ColorWheelExample} from './ColorWheel.stories';
+import {DateFieldExample} from './DateField.stories';
+import {NumberFieldExample} from './NumberField.stories';
+import {RadioGroupExample} from './RadioGroup.stories';
+import React, {useEffect, useRef, useState} from 'react';
+import {SearchFieldExample} from './SearchField.stories';
+import {SliderExample} from './Slider.stories';
+import {SwitchExample} from './Switch.stories';
+import {TextfieldExample} from './TextField.stories';
+import {TimeFieldExample} from './TimeField.stories';
+import {ToggleButtonExample} from './ToggleButton.stories';
+import {userEvent, within} from '@storybook/testing-library';
+
+export default {
+  title: 'React Aria Components'
+};
+
+let TagGroupExample = () =>   (
+  <TagGroup>
+    <Label>Categories</Label>
+    <TagList style={{display: 'flex', gap: 4}}>
+      <Tag>News</Tag>
+      <Tag>Travel</Tag>
+      <Tag>Gaming</Tag>
+      <Tag>Shopping</Tag>
+    </TagList>
+  </TagGroup>
+);
+
+let rows = [
+    {id: 1, name: 'Button', children: <Button>Press me</Button>, isArrowEnabled: true},
+    {id: 2, name: 'TextField', children: <TextfieldExample />, isArrowEnabled: true},
+    {id: 3, name: 'ToggleButton', children: <ToggleButtonExample />, isArrowEnabled: false},
+    {id: 4, name: 'Slider', children: <SliderExample />, isArrowEnabled: true},
+    {id: 5, name: 'RadioGroup', children: <RadioGroupExample />, isArrowEnabled: true},
+    {id: 6, name: 'NumberField', children: NumberFieldExample.render({}), isArrowEnabled: true},
+    {id: 7, name: 'TimeField', children: <TimeFieldExample />, isArrowEnabled: true},
+    {id: 8, name: 'DateField', children: <DateFieldExample />, isArrowEnabled: true},
+    {id: 9, name: 'SearchField', children: <SearchFieldExample />, isArrowEnabled: false},
+    {id: 10, name: 'Checkbox', children: <CheckboxExample />, isArrowEnabled: false},
+    {id: 11, name: 'CheckboxGroup', children: <CheckboxGroupExample />, isArrowEnabled: false},
+    {id: 12, name: 'Switch', children: <SwitchExample />, isArrowEnabled: false},
+    {id: 13, name: 'TagGroup', children: <TagGroupExample />, isArrowEnabled: true},
+    {id: 14, name: 'ColorWheel', children: <ColorWheelExample />, isArrowEnabled: true},
+    {id: 15, name: 'ColorSwatch', children: <ColorSwatchExample />, isArrowEnabled: true}
+];
+
+let INTERACTION_KEYS = new Set([' ', 'Enter', 'Escape']);
+let NAVIGATION_KEYS = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown']);
+
+const EventGridItem = (props: GridListItemProps) => {
+  // @ts-expect-error
+  let {name, children} = props;
+  let itemRef = useRef<HTMLDivElement>(null);
+  let [leakedNavigationKey, setLeakedNavigationKey] = useState<string | null>(null);
+  let [leakedInteractionKey, setLeakedInteractionKey] = useState<string | null>(null);
+
+  let onLeakedKeyboardEvent = (e) => {
+    if (NAVIGATION_KEYS.has(e.key)) {
+      setLeakedNavigationKey(e.key);
+      let element = e.target as HTMLElement;
+      let style = element.getAttribute('style');
+      e.target.setAttribute('style', `${style}; box-shadow: purple 0 0 0 3px !important;`);
+    } else if (INTERACTION_KEYS.has(e.key)) {
+      setLeakedInteractionKey(e.key);
+    }
+  };
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      itemRef.current?.focus();
+    });
+  }, [leakedNavigationKey, leakedInteractionKey]);
+
+  let warning = leakedNavigationKey || leakedInteractionKey;
+  // eslint-disable-next-line no-nested-ternary
+  let color = warning ? leakedNavigationKey ? 'red' : 'orange' : 'inherit';
+
+  return (
+    <GridListItem
+      {...props}
+      ref={itemRef}
+      textValue={name}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        boxShadow: warning ? `0px 0px 0px 3px var(--spectrum-alias-background-color-default) inset, 0px 0px 0px 6px ${color} inset` : 'none',
+        border: '1px dashed lightgrey',
+        aspectRatio: '1 / 1',
+        padding: 24,
+        boxSizing: 'border-box'
+      }}>
+      <Label style={{color: warning ? color : 'inherit'}}>{name + (warning ? ` (${warning})` : '')}</Label>
+      <Group
+        // @ts-expect-error
+        children={children}
+        onKeyDown={onLeakedKeyboardEvent}
+        style={{
+          display: 'inline-flex',
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center'
+        }} />
+    </GridListItem>
+  );
+};
+
+const Story = () => {
+  return (
+    <div style={{padding: 24, display: 'flex', flexDirection: 'column', gap: 10}}>
+      <Group style={{display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center', gap: 10}}>
+        <Label style={{fontSize: 24}}>React Aria (Event Test Suite)</Label>
+        <Group style={{display: 'flex', gap: 10}}>
+          Orange: <span style={{color: 'orange'}}>Interaction key leaked</span>
+          Red: <span style={{color: 'red'}}>Navigation key leaked</span>
+        </Group>
+      </Group>
+
+      <GridList
+        keyboardNavigationBehavior="tab"
+        items={rows}
+        layout="grid"
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr'
+        }}>
+        {(item) => <EventGridItem {...item} />}
+      </GridList>
+    </div>
+  );
+};
+
+let sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+export const EventLeakGrid = {
+  render: Story,
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    let elements = (await canvas.findAllByRole('row')).filter(el => el.className === 'react-aria-GridListItem');
+
+    for (const [index, element] of elements.entries()) {
+      if (element.className !== 'react-aria-GridListItem') {
+        continue;
+      }
+
+      await userEvent.click(element);
+      await sleep(100);
+
+      await userEvent.tab();
+
+      await sleep(100);
+
+      if (!rows[index]) {
+        console.log('No row found for index', index);
+        continue;
+      }
+
+      if (rows[index]?.isArrowEnabled) {
+        for (const key of NAVIGATION_KEYS.values()) {
+
+          await userEvent.keyboard(`{${key}}`);
+          await sleep(100);
+
+          if (document.activeElement === element) {
+            break;
+          }
+        }
+      }
+
+      for (const key of INTERACTION_KEYS.values()) {
+        await userEvent.keyboard(`{${key}}`);
+        await sleep(100);
+
+        if (document.activeElement === element) {
+          break;
+        }
+      }
+    }
+
+  }
+};