fateh999 / react-native-paper-dropdown

Dropdown using react native paper TextInput and Menu
MIT License
132 stars 73 forks source link

Placeholder does not re-appear if field value is set to undefined #82

Closed idiomattic closed 2 months ago

idiomattic commented 2 years ago

I have a dropdown dependent on a value that can be reset (changed to undefined) from outside the dropdown. I've observed that the value can be reset just fine, and that reflects in my component's state, but the value displayed by the dropdown does not return to the placeholder prop.

The dropdown works fine after this reset; I can still open it and choose a new value, but until I choose a new value, the invalid value shows.

I logged the field the dropdown is dependent on as I reset it from outside the dropdown so you can see the value is reset:

 LOG  subcategory: fruit (type: string)
 LOG  subcategory: fruit (type: string)
 LOG  subcategory: undefined (type: undefined)
<DropDown
  mode={"outlined"}
  visible={subcatDropdownVisible}
  showDropDown={() => dispatch(...my reducer action...)}
  onDismiss={() => dispatch(...my reducer action...)}
  value={form.subcategory}
  setValue={value => dispatch(...my reducer action...)}
  list={subcategoryList}
  placeholder='subcategory'
  />

TLDR: I have two dropdowns, one dependent on category and the other subcategory (both in local state). When category changes, I reset subcategory in the local state to undefined. The subcategory dropdown does not display the placeholder as it did before subcategory was chosen in the first place; it still shows the previous value, but functions otherwise.

rewebcan commented 2 years ago

There is a minor bug that is fixed here #79 but it is not merged yet,

You can avoid that issue by adding your list a default value like

<DropDown
  mode={"outlined"}
  visible={subcatDropdownVisible}
  showDropDown={() => dispatch(...my reducer action...)}
  onDismiss={() => dispatch(...my reducer action...)}
  value={form.subcategory}
  setValue={value => dispatch(...my reducer action...)}
  list={[...subcategoryList, { label: 'Please select a subcategory, value: 0}]}
  placeholder='subcategory'
/>

And update form.subcategory = 0,

You are going to see Please select a subcategory on your dropdown as a selected value.

daviddunnington commented 1 year ago

Do you have an ETA on when this fix will be merged?