Context set in collection item node not propagating

[jeffijoe]

Provide a general summary of the issue here

When wrapping collection item elements with context, the context value does not propagate correctly.

Example:

import React from "react";
import {
  Table,
  TableHeader,
  TableBody,
  Row,
  Column,
  Cell,
} from "react-aria-components";

const SomeContext = React.createContext("unset");

export default function App() {
  return (
    <div>
      <Table>
        <TableHeader>
          <Column isRowHeader>Column</Column>
        </TableHeader>
        <TableBody>
          {[1, 2, 3].map((i) => (
            <SomeContext.Provider
              key={i}
              value={`per-row context for row ${i}`}
            >
              <Row>
                <MyCell>Row {i} should have per-row context but is</MyCell>
              </Row>
            </SomeContext.Provider>
          ))}

          <SomeContext.Provider value="last row">
            <Row>
              <MyCell>Last row, but is</MyCell>
            </Row>
          </SomeContext.Provider>
        </TableBody>
      </Table>
      <SomeContext.Provider value="separate">
        <Inner>Rendered outside the context of a table, so is</Inner>
      </SomeContext.Provider>
    </div>
  );
}

function MyCell({ children, ...rest }) {
  // Works here, the context value being read is correct
  const contextValue = React.useContext(SomeContext);
  return (
    <Cell {...rest}>
      <Inner>{children}</Inner>
      [context read directly from cell: {contextValue}]
    </Cell>
  );
}

function Inner({ children }) {
  // For some reason doesn't work here? The context value is that of whichever
  // was set outside the collection component, in this case "unset".
  const contextValue = React.useContext(SomeContext);
  return (
    <div>
      {children} {contextValue}
    </div>
  );
}

Result:

🤔 Expected Behavior?

Context should propagate normally.

😯 Current Behavior

Only the nearest context value outside the collection is read.

💁 Possible Solution

I don't know too much about it, but I'm suspecting it's something to do with the collection node components.

🔦 Context

The code sandbox reproduces the issue using Tables, but I found a similar issue with other collection-based components such as Menu.

🖥️ Steps to Reproduce

Open the code sandbox and observe the context values not being propagated correctly.

Version

RAC 1.3.3, RA 3.3.34.3

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue, here are some related issues:
#6510
#6841 (comment)

The general gist is that this is a bit of a quirk due to how we render the collection in a hidden and shallow dom so that we know all the relevant items which will be in the collection.

[jeffijoe]

Thank you, I hadn't found those other issues when searching for it. So I suppose this is a wont-fix?

Also, somewhat unrelated, but the Collections docs state that virtualization is in use in some components, but this comment (albeit old) states that Aria doesn't contain virtualization. But I would imagine that the tricks you use in the Collections API is to enable virtualization?

[snowystinger]

Correct, unless we or React think of some new solution for this there isn't much to do about it at the moment. So I'll close the issue.

Correct, we do not supply virtualization in either hooks or RAC. We do use it in the Spectrum implementations, so the Collections and hooks and RAC all support it.
We've yet to document it because we're still waiting on the APIs to settle a bit more.

#5912
I think there are some codesandbox examples floating around too if you search our issues/discussions.

[jeffijoe]

Thanks @snowystinger ! And thank you guys for all the work you do on these components, they're incredible! 🙌