Skip to content

Table(react-aria-components): Nested columns causing page freeze #5263

Open
@leijuns

Description

@leijuns

Provide a general summary of the issue here

When I try to implement nested columns, I find that the page freezes when there are operations like setState in the component content. code like:

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      {/* Clicking causes the page to freeze */}
      <Button onClick={() => setCount(count + 1)}>click {count}</Button>
      <Table aria-label="Example table with nested columns">
        <TableHeader>
          <Column title="Name">
            <Column isRowHeader>First Name</Column>
            <Column isRowHeader>Last Name</Column>
          </Column>
          <Column title="Information">
            <Column>Age</Column>
            <Column>Birthday</Column>
          </Column>
        </TableHeader>
        <TableBody>
          <Row>
            <Cell>Sam</Cell>
            <Cell>Smith</Cell>
            <Cell>36</Cell>
            <Cell>May 3</Cell>
          </Row>
          <Row>
            <Cell>Julia</Cell>
            <Cell>Jones</Cell>
            <Cell>24</Cell>
            <Cell>February 10</Cell>
          </Row>
          <Row>
            <Cell>Peter</Cell>
            <Cell>Parker</Cell>
            <Cell>28</Cell>
            <Cell>September 7</Cell>
          </Row>
          <Row>
            <Cell>Bruce</Cell>
            <Cell>Wayne</Cell>
            <Cell>32</Cell>
            <Cell>December 18</Cell>
          </Row>
        </TableBody>
      </Table>
    </div>
  );
}

🤔 Expected Behavior?

It should display normally and not freeze.

😯 Current Behavior

The page is frozen/stuck.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Please access this link: https://codesandbox.io/s/great-tdd-3myszn?file=/src/App.tsx.
Clicking the button on the page will reproduce it.

Version

[email protected]

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

macOS 13.5.2

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

Labels

RACbugSomething isn't working

Type

No type

Projects

  • Status

    🔬 To Investigate / Verify

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions