Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
siteassist-benjamin opened this issue Jan 19, 2023 · 12 comments · May be fixed by #2646
Open

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

siteassist-benjamin opened this issue Jan 19, 2023 · 12 comments · May be fixed by #2646
Assignees
@trofima
Labels
bug a bug in one of the components

Comments

@siteassist-benjamin
Copy link

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

Screenshot 2023-01-19 at 19 48 54

Environment

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

Affected platforms

  • [x ] Android
  • [x ] iOS
  • [ n/a] Web
@siteassist-benjamin siteassist-benjamin added the bug a bug in one of the components label Jan 19, 2023
@oottoohh
Copy link

same to me, any solution for this ?

@illank86
Copy link

illank86 commented Feb 22, 2023 •
edited

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

@brandon-hass
Copy link

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
Copy link

stale bot commented May 21, 2023

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.

@stale stale bot added the wontfix label May 21, 2023
@jiteshgolecha
Copy link

Any updates?

@stale stale bot removed the wontfix label May 23, 2023
@jiteshgolecha
Copy link

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>

@trofima trofima self-assigned this Jun 28, 2023
@trofima trofima linked a pull request Jun 28, 2023 that will close this issue
update picker items on children change #2646
Open
@trofima trofima linked a pull request Jun 28, 2023 that will close this issue
Open
@lidord-wix
Copy link
Contributor

@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
Copy link

stale bot commented Sep 17, 2023

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.

@stale stale bot added the wontfix label Sep 17, 2023
@DrZoidberg09
Copy link

I have the same problem with the newest version 7.8.0

@stale stale bot removed the wontfix label Sep 28, 2023
@muratulashozturk
Copy link

The issue still persists on the latest version.

@chris-hud
Copy link

chris-hud commented Oct 7, 2023 •
edited

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@trofima trofima

Labels
bug a bug in one of the components
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

update picker items on children change wix/react-native-ui-lib