Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

[bug] Quickly expanding several lines with a custom asychronous ExpandIcon onExpand call results in only one line expansion open

Aberta
  • Algo errado?
#961 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react, typescript
Domínio
frontend

Direção de pesquisa

Comece com a reprodução de App.jsx na issue ou abra o CodeSandbox vinculado; em seguida, acompanhe o fluxo de expansão de Table que envolve o expandIcon personalizado e o callback onExpand atrasado. Está concluído quando clicar rapidamente em várias linhas com o atraso de um segundo deixa todas as linhas clicadas expandidas, em vez de apenas a última.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

Custom ExpandIcon quick expansion

How to reproduce

  1. Open the below code sandbox, or copy the below provided code into a project: CodeSandbox
  2. Open several rows in less than one second

Expected behavior: All the rows that have been clicked open and stay open

Actual behavior: The rows open, but close whenever another open and at the end, only one is open

This only happens when the clicking is done faster than the delay after which onExpand is called

Note:

  • The code sandbox uses the following versions: "antd": "5.2.3", "react": "18.2.0"
  • The problem has also been experienced with Ant Design 4.22.7, and React 17.0.2

App.jsx

I copy the code here in case the codesandbox is inaccessible or lost somehow.

import { Table } from "antd";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello Ant Design rc-table</h1>
      <Table
        columns={[{ dataIndex: "key" }]}
        dataSource={[{ key: "bamboo" }, { key: "oak" }, { key: "cinnamon" }]}
        expandable={{
          expandedRowRender: (record) => <span>row-content-{record.key}</span>,
          expandIcon: ({ onExpand, expanded, record }) => {
            return (
              <button
                onClick={() => {
                  setTimeout(() => onExpand(record), 1000);
                }}
              >
                {expanded ? "-" : "+"}
              </button>
            );
          }
        }}
      />
    </div>
  );
}
Linguagem predominante
TypeScript
Estrelas
1.4k
Forks
623
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de react-component/table

Todas as issues de react-component/table

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.