React-admin: SelectArrayInput takes wrong value

[amitos80]

i'm using the following code for multiple selection of countries:

<ReferenceArrayInput label="Country" source="headquartersCountry" reference="country" allowEmpty validation={{ required: true }}>
        <SelectArrayInput optionText="slug" optionValue="slug" />
</ReferenceArrayInput>

the data is fetched from the sever correctly and looks like that:

[
   {code: "ZW", id: "5818b85ae745ce435c9ec67e", name: "Zimbabwe", slug: "zimbabwe", value: "zimbabwe", _id: "5818b85ae745ce435c9ec67e"},
...
]

the problem is that the value selected is always the "name" ether than the "slug" (specified using optionValue).

[djhi]

Hi, thanks for reporting! Can you setup a reproduction sandbox ? (https://codesandbox.io/s/5xwv91v4n4)

[amitos80]

@djhi thanks for the quick response! i'm trying to reproduce but encounter in another problem, for some reason the field is disabled, can you please take a quick look? https://codesandbox.io/s/pyjkokxzr7

[TarSzator]

I can confirm this issue.

Two thing do not work for me on SelectArrayInput and I do not know if the first issue is causing the second.

1. When I select an entry from the drop-down, the Chip is not directly created but the text is written in the input. Than I have to click on the text an press enter which than leads to the Chip Element creation
2. When I than pass save I have also the optionText value in the array and not the optionValue value.

Some additional information which might help narrow down the problem:

• I added a parser to the wrapping ReferenceArrayInput just for fun and saw that the parser already gets the optionText value.
• When I change SelectArrayInput to CheckboxGroupInput without changing anything on the options and the wrapping element: CheckboxGroupInput works as expected with the optionValue value
• When the field already has values inside which are consequently given in optionValue values the element is rendered correctly and I can save. Only adding new elements are given as optionText values on change/save.

[TarSzator]

I checked this out today and believe the error is not on AoR side.
After a debugging for 2h. I started debugging ChipInput (https://github.com/TeamWertarbyte/material-ui-chip-input) and started with taking there un-obfuscated file as ChipInput and magic it works.

I checked the version I used for testing SelectArrayInput and the one the have in NPM and it is the same version number. So I believe now that something is wrong in the obfuscated version they deliver via NPM.

[amitos80]

thanks @TarSzator i can confirm your solution works.
@djhi should i open a new issue for this at https://github.com/TeamWertarbyte/material-ui-chip-input ?

[djhi]

https://github.com/TeamWertarbyte/material-ui-chip-input/issues/175

[amitos80]

@TarSzator so the best solution so far would be to exclude node_modules in react script's babelify ?
@djhi is there a reason for react scripts to babelify the entire node_modules when building admon-on-rest?

[TarSzator]

@amitos80 Yes. Just fyi you have to reject the project from react script to make this configuration (npm run reject).
To also answer you question to @djhi: "react scripts" is von facebook (https://github.com/facebook/create-react-app) and it is just there default config. So this question must go to them :-). They even write if you want a different configuration you have to reject your project or fork their repo.