marmelab / marmelab/react-admin

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

Aperta
#9,155 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
26.9k
Fork
5.5k
Merge medio
2g 3h
PR unite (30g)
19

Descrizione

**What you were expecting:**

`SelectInput` choices should accept `ReadonlyArray`

**What happened instead:**

`SelectInput` choices does not accept `ReadonlyArray`

![image](https://github.com/marmelab/react-admin/assets/49822810/bf8e2e53-6020-455e-a6a1-0de2379aef7e)

**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

```tsx
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;

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

export const SelectInputGroup = () => {
return (
<>

// type error

);
};

```

**Other information:**

My suggestion (though more than just the SelectInput needs to be inspected):
```diff
- choices?: any[];
+ choices?: readonly any[]; // or ReadonlyArray
```
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):

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia da packages/ra-core/src/form/useChoices.tsx alla riga L16, quindi riproduci l'errore TypeScript usando l'esempio SelectInput e il codice StackBlitz collegato alle righe L129 e L151. Esamina gli altri input basati su choices come suggerito; il lavoro è completato quando le readonly choices vengono accettate in modo coerente senza errori TypeScript.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.