Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Some Inputs with choices in their props do not accept `ReadonlyArray<T>`.

Ouverte
  • Quelque chose ne va pas ?
#9,155 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@gitstart y travaille déjà.

Depuis le 3/8/2023.

  • #9162 par @gitstart — ouverte

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
react, typescript
Domaine
frontend

Piste de recherche

Commencez par packages/ra-core/src/form/useChoices.tsx à L16, puis reproduisez l’erreur TypeScript à l’aide de l’exemple SelectInput et du code StackBlitz lié à L129 et L151. Examinez les autres entrées basées sur des choices comme suggéré ; c’est terminé lorsque les readonly choices sont acceptées de manière cohérente sans erreurs TypeScript.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

What you were expecting:

SelectInput choices should accept ReadonlyArray<T>

What happened instead:

SelectInput choices does not accept ReadonlyArray<T>

image

Steps to reproduce:

  • use "react-admin": "^4.12.3"

Related code:

  • Preferably, a sandbox forked from
  • L129
  • L151

https://stackblitz.com/edit/github-h13gjc?file=src%2Fposts%2FPostEdit.tsx

  • A link to a GitHub repo with the minimal codebase to reproduce the issue
import { SelectInput } from 'react-admin';

type Choice = {
  id: number;
  name: string;
};

const mutableArray = [
  {
    id: 1,
    name: 'foo',
  },
  {
    id: 2,
    name: 'bar',
  },
  {
    id: 3,
    name: 'baz',
  },
] satisfies Array<Choice>;

const readonlyArray = [
  {
    id: 1,
    name: 'foo',
  },
  {
    id: 2,
    name: 'bar',
  },
  {
    id: 3,
    name: 'baz',
  },
] as const satisfies ReadonlyArray<Choice>;

export const SelectInputGroup = () => {
  return (
    <>
      <SelectInput source="mutableChoices" choices={mutableArray} />
      <SelectInput source="immutableChoices" choices={readonlyArray} /> // type error
    </>
  );
};

Other information:

My suggestion (though more than just the SelectInput needs to be inspected):

-     choices?: any[];
+     choices?: readonly any[]; // or ReadonlyArray<any>

https://github.com/marmelab/react-admin/blob/de8fbaa3285714aab914e0e76cc369c09a817d3c/packages/ra-core/src/form/useChoices.tsx#L16

This is a small example.
https://www.typescriptlang.org/play?#code/MYewdgzgLgBAtgVygQwEYBsCmBBATr5ATwC4Y8DCAeaXASzAHMA+GAXhgG0ByAMxBC4AaGF1TJcQkWIBeXALoBuAFChIsXJmQATcOkLkipAEqadYPQao16zNp179Jo8U5nzlSngjDAotcDCYAB7IcAAOWABi3sAAjAAUAPqIKBg4uAwQpJaUyGCETACUMADeSjAVMBpQCLhgygC+Hl4+fgHBoRGY0T4ATEm0cCloWHiZxqa6+vhEuflFpeWV1bX1Sk1KSh3hUTEJw2mWhcrbXT1x8RraU0cep7t98QejM4THWyE73TH9V2YWr3eQA

Environment

  • React-admin version: 4.12.3
  • Last version that did not exhibit the issue (if applicable):
  • React version: 18.2.0
  • Browser: Google Chrome 115.0.5790.114 (Official Build) （arm64）
  • Stack trace (in case of a JS error):
Langage dominant
TypeScript
Étoiles
27k
Forks
5.5k
Merge moyen
1 j 3 min
PR mergées (30 j)
32

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de marmelab/react-admin

Toutes les issues de marmelab/react-admin

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.