Adding Picker.Items after initial render fails to retrieve labels for selected items

[siteassist-benjamin]

Description

Related to

Unfortunately there is no mention of this online, I tried very hard to find it.

Steps to reproduce

const [templates, setTemplates] = useState([])

API.getTemplates().then(res => setTemplates(res))

return (
      <Picker
        value={value}
        getLabel={(item) => {
          // console.log("templates", templates);
          const name = templates.find((template) => template.id === item)?.name;
          return name;
        }}
        templates={templates}
      >
        {templates?.map(({ id, name }) => {
          return <PickerItem key={id} value={id} label={name} />;
        })}
      </Picker>

Expected behavior

Expected behavior would be for the input storing the currently selected value to show the selected label

Actual behavior

When an item is selected from the modal picker list - which has all the correct labels, the input field showing the selected item after the modal is closed is blank

Screenshots/Video

Environment

• React Native version: 0.69.7
• React Native UI Lib version: 6.21.0

Affected platforms

• [x ] Android
• [x ] iOS
• [ n/a] Web

[oottoohh]

same to me, any solution for this ?

[illank86]

after update to 7.0.0, the picker become strange. any solution for this?

[brandon-hass]

It looks like Picker items get set as state only on initial creation: src/components/picker/index.tsx. In our app, we've been able to work around this by updating the key prop on the Picker when the items change to force a state reset.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jiteshgolecha]

Any updates?

[jiteshgolecha]

I have found a workaround, add renderPicker to show the label.

<Picker topBarProps={{ useSafeArea: true }} showSearch={true} value={selectedProduct} placeholder="Products" onSearchChange={query => fetchProducts(query)} floatingPlaceholder fieldStyle={styles.withUnderline2} renderPicker={selectedItem => { console.log("selectedItem", selectedItem); var itm = _.find(productList, {id: selectedItem}) console.log("itm", itm); return ( <TextField placeholder="Product" floatingPlaceholder fieldStyle={styles.withUnderline} value={itm?.name} /> ) }} onChange={item => { console.log("productList", productList);console.log("item", item); setSelectedProduct(item); }} mode={Picker.modes.SINGLE} > { productList.map(option => ( <Picker.Item key={option.id} value={option.id} label={option.name} labelStyle={{paddingVertical: 10, paddingHorizontal: 10 }} /> )) } </Picker>

[lidord-wix]

@siteassist-benjamin @trofima I actually couldn't reproduce the issue. I tried with a similar example to the one you shared and everything works as expected. Can you please explain again what is the issue and share a video of the bug? Thanks!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[DrZoidberg09]

I have the same problem with the newest version 7.8.0

[muratulashozturk]

The issue still persists on the latest version.

[chris-hud]

I have the same issue. For me it occurs when I change the options that I supply to the picker after initially generated. So I have 2 pickers, and the options of the second picker are based on the value of the first picker. When I click on the second picker I can choose a new value, and that value is correctly selected, but it does not display as correctly selected. I am using the solution provided by @jiteshgolecha above

[ethanshar]

Can you please try passing the items array prop to Picker component instead of rendering Picker.Item as children

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.