Picker Component resets when items list changes

[stochris]

Description

If the picker item list changes, then, in some cases, the picker will call the onValueChange callback with the first item in the list as it's argument.

Reproduction Steps and Sample Code

This can be reproduced at https://snack.expo.io/Sy1JClEag.

Select 2 or 3, then click on exclude. The new value is 1. This does not happen if you select a higher value than the one being excluded

Solution

Do not call the onValueChange callback when the items list changes, but the selectedValue is stil present in the list

Additional Information

• React Native version: 0.42
• Platform: Android
• Development Operating System: Linux
• Dev tools: Android SDK version 23

[caseyg1204]

Did you find a work around for this?

[stochris]

Nope. In theory, I think it should be doable, but it seems overly complicated. In my case, I managed to get rid of the need to change the picker items.

[joshuapinter]

Got snagged with this as well. I am renaming my items in the Picker and when you update the Picker items, including the renamed one, it loses the selected value, even if your selected value is still in the list.

For example:

<Picker selectedValue="2" ...>
  <Picker.Item key="1" value="1" label="One" />
  <Picker.Item key="2" value="2" label="Two" />
  <Picker.Item key="3" value="3" label="Three" />
</Picker>

If you change the second Picker.Item to:

<Picker.Item key="2" value="2" label="Second" />

It has to re-render but it loses the selectedValue. The selectedValue just becomes the first one, even though the value of the selected item hasn't changed, just the label.

Might be a little confusing but it's a real pain when renaming things. For now, I am getting around it with a dirty solution that adds a new Picker.Item to the list instead of renaming one, which seems to work fine. Except that now you have an invalid Picker.Item in the list.

<Picker selectedValue="2" ...>
  <Picker.Item key="1" value="1" label="One" />
  <Picker.Item key="2" value="2" label="Two" />
  <Picker.Item key="3" value="3" label="Three" />
  <Picker.Item key="2" value="2" label="Second" />
</Picker>

[goblinbr]

This resolved for me:

import React, { Component } from 'react';
import { Picker, Platform } from 'react-native';

class MyPicker extends Component {

  componentWillReceiveProps(nextProps) {
    if (Platform.OS === 'android') {
      let selectedIndex = -1;
      nextProps.children.forEach((c, i) => {
        if (c.props.value === nextProps.selectedValue) {
          selectedIndex = i;
        }
      });
      this.refs.picker._reactInternalInstance._renderedComponent._instance.setState({ initialSelectedIndex: selectedIndex, selectedIndex });
    }
  }

  onValueChange(value, index) {
    if (value !== this.props.selectedValue) {
      this.props.onValueChange(value, index);
    }
  }

  render() {
    return (
      <Picker ref='picker' {...this.props} onValueChange={this.onValueChange.bind(this)}>
        {this.props.children}
      </Picker>
    );
  }
}

MyPicker.Item = Picker.Item;

export { MyPicker };

[denisftw]

@goblinbr Thanks for the solution, but for some reason it didn't help me.

Honestly, I'm a little surprised that a major bug such as this attracts so little attention. I just started working with the Picker component and immediately stumbled upon it. It is easily reproducible on the latest 0.47 version on both the emulator and the actual Android 6.0 phone despite the fact that #9220 was closed a couple of weeks ago.

[ethan6077]

@goblinbr Thank you for you solution, but it doesn't work on me as well. This would not stop triggering the "onValueChange". Is there any other walkaround?

Having the same issue. React Native 0.48.2

[joshuapinter]

I would love it if an core member would jump in here and give their thoughts. That would be enough for myself or somebody else to work on a PR. But working on a PR without a core member's encouragement is a risky use of time.

Never mind, the issue was on my side, I has two onValueChange attributes declared on my component. 🤦‍♂️

[joshuapinter]

@hirvesh So you're saying this is no longer an issue on 0.48.2?

[denisftw]

I've just tried it on 0.48.2 - same problem.

In my scenario, I have a component with multiple Picker elements and one of them changes the interface language. When I change the language and save the settings, the component re-renders and some Picker elements receive new labels. All numeric Pickers retain the correct states, but all text-based ones are reset to the first element.

Probably @hirvesh's use case is different.

[ylac]

I get this bug as well on react native 0.44.3. I traced it to the event argument in _onChange in PickerAndroid.android, but I can't see any difference between the event arg when the option is actually being selected and when the options are changing.

Could one of the core devs please look into this?

[laurent22]

Still happening in 0.49. This Picker component is so full of bugs that I wonder if it'd make sense to just rewrite it.

[syamjayaraj]

https://stackoverflow.com/questions/37597665/how-to-make-react-native-picker-stay-at-newly-selected-option

Working perfectly

[pencilcheck]

Has to coerce into string for proper comparison