fix: Clear contexts inside popovers (#8321)

Author: devongovett

packages/react-aria-components/src/ComboBox.tsx

@@ -93,6 +93,9 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
   );
 });
 
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];
+
 interface ComboBoxInnerProps<T extends object> {
   props: ComboBoxProps<T>,
   collection: Collection<Node<T>>,
@@ -197,7 +200,8 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
           placement: 'bottom start',
           isNonModal: true,
           trigger: 'ComboBox',
-          style: {'--trigger-width': menuWidth} as React.CSSProperties
+          style: {'--trigger-width': menuWidth} as React.CSSProperties,
+          clearContexts: CLEAR_CONTEXTS
         }],
         [ListBoxContext, {...listBoxProps, ref: listBoxRef}],
         [ListStateContext, state],

packages/react-aria-components/src/DatePicker.tsx

@@ -72,6 +72,9 @@ export const DateRangePickerContext = createContext<ContextValue<DateRangePicker
 export const DatePickerStateContext = createContext<DatePickerState | null>(null);
 export const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);
 
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];
+
 /**
  * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
  */
@@ -148,7 +151,8 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
           trigger: 'DatePicker',
           triggerRef: groupRef,
           placement: 'bottom start',
-          style: {'--trigger-width': groupWidth} as React.CSSProperties
+          style: {'--trigger-width': groupWidth} as React.CSSProperties,
+          clearContexts: CLEAR_CONTEXTS
         }],
         [DialogContext, dialogProps],
         [TextContext, {
@@ -251,7 +255,8 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
           trigger: 'DateRangePicker',
           triggerRef: groupRef,
           placement: 'bottom start',
-          style: {'--trigger-width': groupWidth} as React.CSSProperties
+          style: {'--trigger-width': groupWidth} as React.CSSProperties,
+          clearContexts: CLEAR_CONTEXTS
         }],
         [DialogContext, dialogProps],
         [DateFieldContext, {

packages/react-aria-components/src/Popover.tsx

@@ -18,7 +18,7 @@ import {focusSafely} from '@react-aria/interactions';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useEffect, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {useIsHidden} from '@react-aria/collections';
 
 export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps {
@@ -80,7 +80,12 @@ export interface PopoverRenderProps {
   isExiting: boolean
 }
 
-export const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);
+interface PopoverContextValue extends PopoverProps {
+  /** Contexts to clear. */
+  clearContexts?: Context<any>[]
+}
+
+export const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);
 
 // Stores a ref for the portal container for a group of popovers (e.g. submenus).
 const PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);
@@ -134,10 +139,11 @@ interface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderP
   isExiting: boolean,
   UNSTABLE_portalContainer?: Element,
   trigger?: string,
-  dir?: 'ltr' | 'rtl'
+  dir?: 'ltr' | 'rtl',
+  clearContexts?: Context<any>[]
 }
 
-function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: PopoverInnerProps) {
+function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts, ...props}: PopoverInnerProps) {
   // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)
   // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
   let arrowRef = useRef<HTMLDivElement>(null);
@@ -190,6 +196,16 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
     }
   }, [isDialog, ref]);
 
+  let children = useMemo(() => {
+    let children = renderProps.children;
+    if (clearContexts) {
+      for (let Context of clearContexts) {
+        children = <Context.Provider value={null}>{children}</Context.Provider>;
+      }
+    }
+    return children;
+  }, [renderProps.children, clearContexts]);
+
   let style = {...popoverProps.style, ...renderProps.style};
   let overlay = (
     <div
@@ -209,7 +225,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
       data-exiting={isExiting || undefined}>
       {!props.isNonModal && <DismissButton onDismiss={state.close} />}
       <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>
-        {renderProps.children}
+        {children}
       </OverlayArrowContext.Provider>
       <DismissButton onDismiss={state.close} />
     </div>

packages/react-aria-components/src/Select.tsx

@@ -100,6 +100,9 @@ export const Select = /*#__PURE__*/ (forwardRef as forwardRefType)(function Sele
   );
 });
 
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [LabelContext, ButtonContext, TextContext];
+
 interface SelectInnerProps<T extends object> {
   props: SelectProps<T>,
   selectRef: ForwardedRef<HTMLDivElement>,
@@ -186,7 +189,8 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
           scrollRef,
           placement: 'bottom start',
           style: {'--trigger-width': buttonWidth} as React.CSSProperties,
-          'aria-labelledby': menuProps['aria-labelledby']
+          'aria-labelledby': menuProps['aria-labelledby'],
+          clearContexts: CLEAR_CONTEXTS
         }],
         [ListBoxContext, {...menuProps, ref: scrollRef}],
         [ListStateContext, state],

packages/react-aria-components/test/ComboBox.test.js

@@ -340,4 +340,42 @@ describe('ComboBox', () => {
 
     expect(comboboxTester.options()).toHaveLength(7);
   });
+
+  it('should clear contexts inside popover', async () => {
+    let tree = render(
+      <ComboBox>
+        <Label>Preferred fruit or vegetable</Label>
+        <Input />
+        <Button />
+        <Popover data-testid="popover">
+          <Label>Hello</Label>
+          <Button>Yo</Button>
+          <Input />
+          <Text>hi</Text>
+          <ListBox>
+            <ListBoxItem id="cat">Cat</ListBoxItem>
+            <ListBoxItem id="dog">Dog</ListBoxItem>
+            <ListBoxItem id="kangaroo">Kangaroo</ListBoxItem>
+          </ListBox>
+        </Popover>
+      </ComboBox>
+    );
+
+    let selectTester = testUtilUser.createTester('Select', {root: tree.container});
+
+    await selectTester.open();
+
+    let popover = await tree.getByTestId('popover');
+    let label = popover.querySelector('.react-aria-Label');
+    expect(label).not.toHaveAttribute('for');
+
+    let button = popover.querySelector('.react-aria-Button');
+    expect(button).not.toHaveAttribute('aria-expanded');
+
+    let input = popover.querySelector('.react-aria-Input');
+    expect(input).not.toHaveAttribute('role');
+
+    let text = popover.querySelector('.react-aria-Text');
+    expect(text).not.toHaveAttribute('id');
+  });
 });

packages/react-aria-components/test/DatePicker.test.js

@@ -274,4 +274,53 @@ describe('DatePicker', () => {
     let hiddenInput = getByRole('textbox', {hidden: true});
     expect(hiddenInput).toHaveAttribute('disabled');
   });
+
+  it('should clear contexts inside popover', async () => {
+    let {getByRole, getByTestId} = render(
+      <DatePicker data-foo="bar">
+        <Label>Birth date</Label>
+        <Group>
+          <DateInput>
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+          <Button>▼</Button>
+        </Group>
+        <Text slot="description">Description</Text>
+        <Text slot="errorMessage">Error</Text>
+        <Popover data-testid="popover">
+          <Dialog>
+            <Label>Hi</Label>
+            <Group>Yo</Group>
+            <Button>Hi</Button>
+            <Text>test</Text>
+            <Calendar>
+              <header>
+                <Button slot="previous">◀</Button>
+                <Heading />
+                <Button slot="next">▶</Button>
+              </header>
+              <CalendarGrid>
+                {(date) => <CalendarCell date={date} />}
+              </CalendarGrid>
+            </Calendar>
+          </Dialog>
+        </Popover>
+      </DatePicker>
+    );
+
+    await user.click(getByRole('button'));
+
+    let popover = await getByTestId('popover');
+    let label = popover.querySelector('.react-aria-Label');
+    expect(label).not.toHaveAttribute('id');
+
+    let button = popover.querySelector('.react-aria-Button');
+    expect(button).not.toHaveAttribute('aria-expanded');
+
+    let group = popover.querySelector('.react-aria-Group');
+    expect(group).not.toHaveAttribute('id');
+
+    let text = popover.querySelector('.react-aria-Text');
+    expect(text).not.toHaveAttribute('id');
+  });
 });

packages/react-aria-components/test/DateRangePicker.test.js

@@ -314,4 +314,57 @@ describe('DateRangePicker', () => {
       expect(spinbutton).toHaveAttribute('aria-disabled', 'true');
     }
   });
+
+  it('should clear contexts inside popover', async () => {
+    let {getByRole, getByTestId} = render(
+      <DateRangePicker data-foo="bar">
+        <Label>Birth date</Label>
+        <Group>
+          <DateInput slot="start">
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+          <span aria-hidden="true">–</span>
+          <DateInput slot="end">
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+          <Button>▼</Button>
+        </Group>
+        <Text slot="description">Description</Text>
+        <Text slot="errorMessage">Error</Text>
+        <Popover data-testid="popover">
+          <Dialog>
+            <Label>Hi</Label>
+            <Group>Yo</Group>
+            <Button>Hi</Button>
+            <Text>test</Text>
+            <RangeCalendar>
+              <header>
+                <Button slot="previous">◀</Button>
+                <Heading />
+                <Button slot="next">▶</Button>
+              </header>
+              <CalendarGrid>
+                {(date) => <CalendarCell date={date} />}
+              </CalendarGrid>
+            </RangeCalendar>
+          </Dialog>
+        </Popover>
+      </DateRangePicker>
+    );
+
+    await user.click(getByRole('button'));
+
+    let popover = await getByTestId('popover');
+    let label = popover.querySelector('.react-aria-Label');
+    expect(label).not.toHaveAttribute('id');
+
+    let button = popover.querySelector('.react-aria-Button');
+    expect(button).not.toHaveAttribute('aria-expanded');
+
+    let group = popover.querySelector('.react-aria-Group');
+    expect(group).not.toHaveAttribute('id');
+
+    let text = popover.querySelector('.react-aria-Text');
+    expect(text).not.toHaveAttribute('id');
+  });
 });

packages/react-aria-components/test/Select.test.js

@@ -377,4 +377,40 @@ describe('Select', () => {
     let trigger = selectTester.trigger;
     expect(document.activeElement).toBe(trigger);
   });
+
+  it('should clear contexts inside popover', async () => {
+    let {getByTestId} = render(
+      <Select data-testid="select" defaultSelectedKey="cat">
+        <Label>Favorite Animal</Label>
+        <Button>
+          <SelectValue />
+        </Button>
+        <Popover data-testid="popover">
+          <Label>Hello</Label>
+          <Button>Yo</Button>
+          <Text>hi</Text>
+          <ListBox>
+            <ListBoxItem id="cat">Cat</ListBoxItem>
+            <ListBoxItem id="dog">Dog</ListBoxItem>
+            <ListBoxItem id="kangaroo">Kangaroo</ListBoxItem>
+          </ListBox>
+        </Popover>
+      </Select>
+    );
+
+    let wrapper = getByTestId('select');
+    let selectTester = testUtilUser.createTester('Select', {root: wrapper});
+
+    await selectTester.open();
+
+    let popover = await getByTestId('popover');
+    let label = popover.querySelector('.react-aria-Label');
+    expect(label).not.toHaveAttribute('for');
+
+    let button = popover.querySelector('.react-aria-Button');
+    expect(button).not.toHaveAttribute('aria-expanded');
+
+    let text = popover.querySelector('.react-aria-Text');
+    expect(text).not.toHaveAttribute('id');
+  });
 });