Select input and Reference input not working correctly

[Mracobes9]

Please do not submit support requests or "How to" questions here. For that, go to StackOverflow.

What you were expecting:
I expect, that current value of select input will be empty, if related select input has been changed

What happened instead:
current value of select input not changed

Steps to reproduce:

1. Select value in first select inpit
2. select value in second select input
3. change value in first select input

Related code:

            <FormDataConsumer>
                {
                    ({formData, ...rest})=><ReferenceInput label="classificator1" source="classificator_part_one_id" 
                    reference="classificator_part_ones" allowEmpty {...rest}>
                        <SelectInput label="classificator1" optionText="name" optionValue="id"/>
                    </ReferenceInput>

                }
            </FormDataConsumer>
            <FormDataConsumer>
                {
                    ({formData, ...rest})=>formData.classificator_part_one_id && <ReferenceInput label="classificator2" 
                    source="classificator_part_two_id" reference="classificator_part_twos"
                    filter={{part_one_id: formData.classificator_part_one_id}}
                    allowEmpty {...rest}>
                        <SelectInput label="classificator2" optionText="name" optionValue="id"/>
                    </ReferenceInput>
                }
                
            </FormDataConsumer>
            <FormDataConsumer>
                {
                    ({formData, ...rest})=>formData.classificator_part_one_id && formData.classificator_part_two_id && <ReferenceInput label="classificator3" 
                    source="classificator_part_three_id" reference="classificator_part_threes" filter={{part_two_id: formData.classificator_part_two_id}}
                    allowEmpty  {...rest}>
                        <SelectInput label="classificator3" optionText="name" optionValue="id"/>
                    </ReferenceInput>
                }
                
            </FormDataConsumer>
            <TextInput source="brand" label="Бренд" validate={required()}/>
            <TextInput source="size_of_manufacturer" label="Размер производителя" validate={required()}/>
            <NumberInput source="price" label="Размер производителя" validate={required()}/>
            <TextInput source="vendor_code" label="Артикул" validate={required()}/>
            <SelectInput label="Статус по товару" source="product_status" optionValue="id" optionText="name" choices={[
                {id:0, name: "Выкуплено"},
                {id:1, name: "Отменено"}

            ]}/>
            <SelectInput source="cause_of_reject" optionValue="id" optionText="name" label="Причина отказа" choices={[
                {id: 0, name: "Размер мал"},
                {id:1, name: "Размер велик"},
                {id:2, name: "Не понравился товар"},
                {id:3, name: "Не понравилось как сидит"},
                {id:4, name: "Купил в другом месте"},
                {id:5, name: "Передумал"},
                {id:6, name: "Другое"}
            ]}/>
            <DateInput source="delivery_date_fact" label="Фактическая дата доставки" validate={required()}/>
            <DateInput type="time" source="time_of_delivery" label="Фактическое время доставки" validate={required()}/>
        </SimpleForm>

Other information:

Environment

• React-admin version: 2.4.0
• Last version that did not exhibit the issue (if applicable):
• React version:16.6.0
• Browser: all
• Stack trace (in case of a JS error):

[fzaninotto]

Sorry, there is too much code in your sample to understand what's wrong. Can you please reduce the snippet to the minimum code reproducing the issue? Can you explain precisely the steps you take to reproduce the issue (naming the fields you interact with)?

[Mracobes9]

Sorry. It is needed code:

        <SimpleForm>
            <FormDataConsumer>
                {
                    ({formData, ...rest})=><ReferenceInput label="classificator1" source="classificator_part_one_id" 
                    reference="classificator_part_ones" allowEmpty {...rest}>
                        <SelectInput label="classificator1" optionText="name" optionValue="id" />
                    </ReferenceInput>

                }
            </FormDataConsumer>
            <FormDataConsumer>
                {
                    ({formData, ...rest})=>formData.classificator_part_one_id && <ReferenceInput label="classificator2" 
                    source="classificator_part_two_id" reference="classificator_part_twos"
                    filter={{part_one_id: formData.classificator_part_one_id}}
                    allowEmpty {...rest}>
                        <SelectInput label="classificator2" optionText="name" optionValue="id" />
                    </ReferenceInput>
                }
                
            </FormDataConsumer>
            <FormDataConsumer>
                {
                    ({formData, ...rest})=>formData.classificator_part_one_id && formData.classificator_part_two_id && <ReferenceInput label="classificator3" 
                    source="classificator_part_three_id" reference="classificator_part_threes" filter={{part_two_id: formData.classificator_part_two_id}}
                    allowEmpty  {...rest}>
                        <SelectInput label="classificator3" optionText="name" optionValue="id"/>
                    </ReferenceInput>
                }
                
            </FormDataConsumer>
         </SimpleForm>

In the first step, i change select with "classificator1". In the second step, select with "classificator2". In the third step, select with "classificator1"

[fzaninotto]

Why does the first input have to be decorated by the FormDataConsumer?

[Mracobes9]

Because, i want change choices attr in second select, after change value of first select

[fzaninotto]

I still don't understand the issue. Can you tell me what the user does in the UI, what they expect, and what happens instead?

[edy]

Hi, i think i understand @Mracobes9 since i think have the same issue :-)

The problem is that the ReferenceInput sets an empty string as the value of the field if you select the empty entry. In previous versions the field was set to null (is this what allowEmpty should be for?)

[edy]

The docs state the following:

Enabling the allowEmpty props adds an empty choice (with null value) on top of the options, and makes the value nullable

[Kmaschta]

In order to help maintainers, I have two questions for you both:

• Does this issue still affects the newer versions of React Admin ?
• Can you provide a CodeSandbox in order to reproduce the issue quickly? You can fork this one: https://codesandbox.io/s/349ovjmlx5

[fzaninotto]

So I understand it's a documentation issue, where 'null' should be replaced by 'empty string'.

What's the impact of the null => '' change on your UI?

[edy]

I addressed the null/'' issue in #2780 which can be merged now.

I didn't understand @Mracobes9 and now I think both issues have nothing in common.

[fzaninotto]

OK, since @Mracobes9 hasn't answered for the past 2 months, I'll close this issue.