Unable to reset all the choices in SelectInput on Change of FormData

What you were expecting: I’m rendering a RefrenceInput inside the FormDataConsumer, If there are any changes in FormData , the
ReferenceInput have to load Options to select , and reset the selected values already.

What happened instead: The ReferenceInput loading options But the previously selected option remain in the list.

Steps to reproduce: Use the RefrenceInput inside the FormDataConsumer

Related code:

<FormDataConsumer>
     {({ formData, ...rest }) =>
         formData ? formData.school_province &&
             <ReferenceInput label="District" source="school_district" reference="options" filter={{ table: 'District_List', filter: ['province_id,=,' + formData.school_province] }}>
                 <SelectInput optionText="district" {...rest} />
             </ReferenceInput>
             : ''
      }
</FormDataConsumer>

Environment

• React-admin version:2.3.4
• Last version that did not exhibit the issue (if applicable):
• React version:16.3.1
• Browser:Chrome 68.0.3440.106

[fzaninotto]

In fact, After thinking a bit more about it, the problem does not lie with the options, but with the value…

In the example of state/city dropdowns, given that you selected state A and city A1, then if you select state B, the value of city should reset to undefined since A1 isn’t in state B. In that case, react-admin wouldn’t display the previous value in the list.

State  [A] B C D
City [A1] A2 A3 A4

State  A [B] C D
City [ ] B1 B2 B3 B4

Now what’s left to decide if it’s react-admin’s job or not to remove the value if it is not in the list of possible options. By default, it doesn’t make sense (because the list of options is limited, and it can be very resource consuming to make sure that the value is a possible option). But we could make that optional.

I think that it would need to be in react-admin if there were no simple way to do it otherwise. I need to study redux-form deeper to decide.

[mo-ah-dawood]

I solved resetting the value using redux-form

1. import change from redux-form
   • import {change } from 'redux-form'
2. give my simple form a name
   • <SimpleForm form="myFrm"
3. i found that FormDataConsumer passes dispatch func. on rest object so i used it
   • onChange={() => rest.dispatch(change("myFrm", "myField", ""))}

here is my code . hope it can help any one