Skip to content

Fix picker value issue #1425

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.

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

Merged
merged 2 commits into from
Jul 25, 2021
Merged

Fix picker value issue #1425

merged 2 commits into from
Jul 25, 2021

Conversation

ethanshar
Copy link
Collaborator

Description

Fix how we handle internal picker value change for custom picker in multi mode

Fix #1387

Changelog

Fix issue with Picker with custom renderPicker in multi-select mode not reacting to value change

const externalValueChanged = !_.isEmpty(nextProps.value) && prevState.value !== nextProps.value;
/* Relevant for multi select mode when we keep an internal value state */
const internalValueChanged = prevState.value !== prevState.prevValue;
if (internalValueChanged) {
Copy link
Collaborator

@M-i-k-e-l M-i-k-e-l Jul 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems this is not actually internal, we get here sometimes from external change.
Code for reproduction below (change from external will not work each time):

import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {View, Text, Card, TextField, Button, Picker, PickerItemValue} from 'react-native-ui-lib'; //eslint-disable-line

export default class PlaygroundScreen extends Component {
  render() {
    return (
      <View bg-dark80 flex padding-20 center>
        <View marginT-20>
          <TextField placeholder="Placeholder" />
        </View>
        <Card height={100} center padding-20>
          <Text text50>Playground Screen</Text>
        </Card>
        <View flex center>
          <Button marginV-20 label="Button"/>
        </View>
        <PickerBug/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {},
});

class PickerBug extends React.Component {
  state = {
    val: 1
  };

  getNumberPickerRenderer = (label: string | undefined) => (value?: PickerItemValue) => (
    <View padding-20 row>
      <View marginR-s5 flex>
        <Text body>{label}</Text>
      </View>
      <View>
        <Text useCustomTheme bodyBold>
          {value ?? null}
        </Text>
      </View>
    </View>
  );

  numberOptions = [
    {label: '1', value: 1},
    {label: '2', value: 2},
    {label: '3', value: 3}
  ];

  render() {
    return (
      <>
        <Text>Real value: {this.state.val}</Text>
        <Button link onPress={() => this.setState({val: this.state.val + 1})} label="+"/>
        <Button link onPress={() => this.setState({val: this.state.val - 1})} label="-"/>
        <Picker
          migrate
          value={this.state.val}
          onChange={(val: number) => this.setState({val})}
          renderPicker={this.getNumberPickerRenderer('label')}
        >
          {this.numberOptions.map(item => (
            <Picker.Item key={item.value} value={item.value} label={item.label}/>
          ))}
        </Picker>
      </>
    );
  }
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be fixed now.

@M-i-k-e-l M-i-k-e-l merged commit cd121cd into master Jul 25, 2021
@ethanshar ethanshar deleted the fix/PickerIssue_1387 branch November 30, 2021 08:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Picker mode='MULTI' item selection not working with custom renderPicker in 5.22.0
2 participants