marmelab / marmelab/react-admin

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

Open
#9,155 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
26.9k
Forks
5.5k
Avg merge
2d 3h
Merged PRs (30d)
19

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/ra-core/src/form/useChoices.tsx at L16, then reproduce the TypeScript error using the SelectInput example and the linked StackBlitz code at L129 and L151. Inspect the other choice-based inputs as suggested; done means readonly choices are accepted consistently without TypeScript errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.