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?

[ghost]

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.

[ghost]

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

[joshuapinter]

@Stale This is still an issue.

@syamjayaraj's link to a "solution" that is "working perfectly" has nothing to do with this issue. That solution refers to changing the selection of a Picker, not editing an Option for the Picker and having the current value reset after making that edit.

So, yes, this is still an issue in the react-native core and should remain on here and get some attention from the react-native team.

[hramos]

I took a look at this, and it seems to be expected behavior. From the PickerAndroid.android.js source code,

// The picker is a controlled component. This means we expect the
// on*Change handlers to be in charge of updating our
// `selectedValue` prop. That way they can also
// disallow/undo/mutate the selection of certain values. In other
// words, the embedder of this component should be the source of
// truth, not the native component.

Therefore, @goblinbr's solution is correct.

[Keronmat]

You can try this. this worked for. At first it kept going back to the selected value.

onValueChange (value) { this.setState({ selected1 : value }); }
selectedValue={this.state.selected1} onValueChange={this.onValueChange.bind(this)}>

[Octaner]

@goblinbr alternative component version to fix this problem with deep-equal npm package

import { Picker, Platform } from 'react-native'
import equal from 'deep-equal'

class FixedPicker extends Component {
  disabledOnValueChange = false

  componentWillReceiveProps (nextProps) {
    if (Platform.OS === 'android') {
      const thisChildrenProps = this.props.children.map(child => child.props)
      const nextChildrenProps = nextProps.children.map(child => child.props)

      if (equal(thisChildrenProps, nextChildrenProps) === false) this.disabledOnValueChange = true
    }
  }

  onValueChange = (value, index) => {
    if (this.disabledOnValueChange === true) {
      this.disabledOnValueChange = false
      return
    }

    this.props.onValueChange(value, index)
  }

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

FixedPicker.Item = Picker.Item

export { FixedPicker }

[joshuapinter]

Hey @jcppman, that worked great!!

[joshuapinter]

For those that might want this in a Component form, here's the modified version.

import React      from "react";
import { Picker } from "react-native";

// This is necessary because the native Picker does not handle edits of existing Picker.Items.
// For example, if you edit the selected Picker.Item, it will lose the selected value. This fixes that.
//
// See https://github.com/facebook/react-native/issues/13351#issuecomment-450281257
//
export default class FixedPicker extends React.Component {

  render() {
    const key = React.Children.map( this.props.children, child => Object.values( child.props ).join( "," ) ).join( ";" );

    return <Picker { ...this.props } key={ key } />;
  }

}

Thanks again, @jcppman!

[rohan-gangaraju]

Thanks @jcppman and @joshuapinter ! Modifications at multiple places was made simple by the modified version !

[antonioaltamura]

@jcppman I wasted hours on this bug, at first I thought it came from react-18next (my use case is the same of yours, a Picker to switch app language). Thanks a lot!

Honestly, seeing open issue this big from 2017 is worring me a lot, is React-native still in active development and REAL bugfixing?

[joshuapinter]

@antonioaltamura Are you kidding me? There's been 4 commits in the last 12 hours.

Don't get me wrong, I'm as frustrated as you are that these seemingly glaring bugs are still not fixed in master after several years and a dozen releases, but a quick look at the repo shows it's under very active development.

[elicwhite]

I was able to repro this on 0.59. If someone wants to investigate this problem and send a PR that would be greatly appreciated.

[cpojer]

cc @Kudo

[Kudo]

@cpojer Here is the PR #24793 to address this issue.
Controlled component is hard, hopefully if there could be some systematical solution.

[waqaramjad]

same issue here

[waqaramjad]

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

Working perfectly

you should understand the issue first

[lucasriondel]

same issue.

[shogunpurple]

Same issue here.

[AlexandrDobrovolskiy]

There is this naming trouble, be careful, prop selectedValue accepts the index of the selected value.