From 4a241e8597a490dbca1b4b1afb9d8a46b112786b Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 16 Sep 2022 05:49:51 +0530 Subject: [PATCH 01/26] make form controlled by moving inputValues to state --- src/components/Form.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index f42101700862..c641a99e1f4c 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -57,10 +57,10 @@ class Form extends React.Component { this.state = { errors: {}, + inputValues: {}, }; this.inputRefs = {}; - this.inputValues = {}; this.touchedInputs = {}; this.setTouchedInput = this.setTouchedInput.bind(this); @@ -87,12 +87,12 @@ class Form extends React.Component { )); // Validate form and return early if any errors are found - if (!_.isEmpty(this.validate(this.inputValues))) { + if (!_.isEmpty(this.validate(this.state.inputValues))) { return; } // Call submit handler - this.props.onSubmit(this.inputValues); + this.props.onSubmit(this.state.inputValues); } /** @@ -145,30 +145,31 @@ class Form extends React.Component { const defaultValue = this.props.draftValues[inputID] || child.props.defaultValue; // We want to initialize the input value if it's undefined - if (_.isUndefined(this.inputValues[inputID])) { - this.inputValues[inputID] = defaultValue; + if (_.isUndefined(this.state.inputValues[inputID])) { + this.state.inputValues[inputID] = defaultValue; } return React.cloneElement(child, { ref: node => this.inputRefs[inputID] = node, defaultValue, + value: this.state.inputValues[inputID], errorText: this.state.errors[inputID] || '', onBlur: () => { this.setTouchedInput(inputID); - this.validate(this.inputValues); + this.validate(this.state.inputValues); }, onInputChange: (value, key) => { const inputKey = key || inputID; - this.inputValues[inputKey] = value; - const inputRef = this.inputRefs[inputKey]; + this.setState(prevState => ({ + inputValues: { + ...prevState.inputValues, + [inputKey]: value, + }, + }), () => this.validate(this.state.inputValues)); - if (key && inputRef && _.isFunction(inputRef.setNativeProps)) { - inputRef.setNativeProps({value}); - } if (child.props.shouldSaveDraft) { FormActions.setDraftValues(this.props.formID, {[inputKey]: value}); } - this.validate(this.inputValues); }, }); }); From 3055df6b583554fe1e54f9e49bf071578558df89 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 16 Sep 2022 05:52:32 +0530 Subject: [PATCH 02/26] Make Picker controlled only and remove setNativeProps --- src/components/Picker/BasePicker/index.js | 33 ++++------------------- 1 file changed, 5 insertions(+), 28 deletions(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index eb3021ab54a9..b451dc8eef2f 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -10,26 +10,7 @@ class BasePicker extends React.Component { constructor(props) { super(props); - this.pickerValue = this.props.defaultValue; - - this.updateSelectedValueAndExecuteOnChange = this.updateSelectedValueAndExecuteOnChange.bind(this); this.executeOnCloseAndOnBlur = this.executeOnCloseAndOnBlur.bind(this); - this.setNativeProps = this.setNativeProps.bind(this); - } - - /** - * This method mimicks RN's setNativeProps method. It's exposed to Picker's ref and can be used by other components - * to directly manipulate Picker's value when Picker is used as an uncontrolled input. - * - * @param {*} value - */ - setNativeProps({value}) { - this.pickerValue = value; - } - - updateSelectedValueAndExecuteOnChange(value) { - this.props.onInputChange(value); - this.pickerValue = value; } executeOnCloseAndOnBlur() { @@ -42,12 +23,12 @@ class BasePicker extends React.Component { const hasError = !_.isEmpty(this.props.errorText); return ( this.props.icon(this.props.size)} disabled={this.props.disabled} fixAndroidTouchableBug @@ -57,15 +38,11 @@ class BasePicker extends React.Component { onFocus: this.props.onOpen, onBlur: this.executeOnCloseAndOnBlur, }} - ref={(node) => { - if (!node || !_.isFunction(this.props.innerRef)) { + ref={el => { + if (!_.isFunction(this.props.innerRef)) { return; } - - this.props.innerRef(node); - - // eslint-disable-next-line no-param-reassign - node.setNativeProps = this.setNativeProps; + this.props.innerRef(el); }} /> ); From 50614070f2d2a0ce834cbb094ab9800ba1f64b58 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 16 Sep 2022 05:55:54 +0530 Subject: [PATCH 03/26] make picker work with Form --- src/components/Picker/index.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js index 81e80bea6541..929e2ad0ee77 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker/index.js @@ -29,6 +29,9 @@ const propTypes = { /** Saves a draft of the input value when used in a form */ shouldSaveDraft: PropTypes.bool, + + /** A callback method that is called when the value changes and it received the selected value as an argument */ + onInputChange: PropTypes.func.isRequired, }; const defaultProps = { @@ -47,6 +50,23 @@ class Picker extends PureComponent { this.state = { isOpen: false, }; + + this.onInputChange = this.onInputChange.bind(this); + } + + /** + * Forms use inputID to set values. But Picker passes an index as the second parameter to onInputChange + * We are overriding this behavior to make Picker work with Form + * @param {String} value + * @param {Number} index + */ + onInputChange(value, index) { + if (this.props.inputID) { + this.props.onInputChange(value, this.props.inputID); + return; + } + + this.props.onInputChange(value, index); } render() { @@ -72,6 +92,7 @@ class Picker extends PureComponent { value={this.props.value} // eslint-disable-next-line react/jsx-props-no-spreading {...pickerProps} + onInputChange={this.onInputChange} /> From 6e75af4b9d17cf8478125ea91584e8ef5c3c5862 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 16 Sep 2022 06:50:26 +0530 Subject: [PATCH 04/26] remove defaultValue prop from Picker --- src/components/Picker/BasePicker/index.js | 2 +- src/components/StatePicker.js | 5 ----- src/pages/settings/Profile/ProfilePage.js | 3 +-- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index b451dc8eef2f..2f61f129ac3b 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -28,7 +28,7 @@ class BasePicker extends React.Component { style={this.props.size === 'normal' ? basePickerStyles(this.props.disabled, hasError, this.props.focused) : styles.pickerSmall} useNativeAndroidPickerStyle={false} placeholder={this.props.placeholder} - value={this.props.value || this.props.defaultValue} + value={this.props.value} Icon={() => this.props.icon(this.props.size)} disabled={this.props.disabled} fixAndroidTouchableBug diff --git a/src/components/StatePicker.js b/src/components/StatePicker.js index a76fd7ba0197..ceff688954a8 100644 --- a/src/components/StatePicker.js +++ b/src/components/StatePicker.js @@ -32,16 +32,12 @@ const propTypes = { /** Error text to display */ errorText: PropTypes.string, - /** The default value of the state picker */ - defaultValue: PropTypes.string, - ...withLocalizePropTypes, }; const defaultProps = { label: '', value: undefined, - defaultValue: undefined, errorText: '', shouldSaveDraft: false, inputID: undefined, @@ -56,7 +52,6 @@ const StatePicker = forwardRef((props, ref) => ( items={STATES} onInputChange={props.onInputChange} value={props.value} - defaultValue={props.defaultValue} label={props.label || props.translate('common.state')} errorText={props.errorText} onBlur={props.onBlur} diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 250a7e2021ff..dde95741bac8 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -260,7 +260,7 @@ class ProfilePage extends Component { value: '', label: this.props.translate('profilePage.selectYourPronouns'), }} - defaultValue={pronounsPickerValue} + value={pronounsPickerValue} /> {this.state.hasSelfSelectedPronouns && ( @@ -290,7 +290,6 @@ class ProfilePage extends Component { label={this.props.translate('profilePage.timezone')} items={timezones} isDisabled={this.state.isAutomaticTimezone} - defaultValue={this.state.selectedTimezone} value={this.state.selectedTimezone} /> From b3746e580ee4d6e19fc45a751d6d5bcf7f7e9cf2 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 16 Sep 2022 04:28:31 +0300 Subject: [PATCH 05/26] fix eslint error --- src/components/Picker/BasePicker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index 2f61f129ac3b..a34b523f383d 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -38,7 +38,7 @@ class BasePicker extends React.Component { onFocus: this.props.onOpen, onBlur: this.executeOnCloseAndOnBlur, }} - ref={el => { + ref={(el) => { if (!_.isFunction(this.props.innerRef)) { return; } From 636263d4e889105d2987164e58d02a265f5cb15f Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 5 Oct 2022 03:53:07 +0530 Subject: [PATCH 06/26] remove default value --- src/components/CheckboxWithLabel.js | 8 +++--- src/components/Form.js | 7 +++--- src/pages/settings/Profile/ProfilePage.js | 30 ++++++++++++++--------- 3 files changed, 25 insertions(+), 20 deletions(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 6ac3180e174c..eddbb40252e9 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -40,8 +40,8 @@ const propTypes = { /** Error text to display */ errorText: PropTypes.string, - /** The default value for the checkbox */ - defaultValue: PropTypes.bool, + /** The value for the checkbox */ + value: PropTypes.bool, /** React ref being forwarded to the Checkbox input */ forwardedRef: PropTypes.func, @@ -61,7 +61,7 @@ const defaultProps = { errorText: '', shouldSaveDraft: false, isChecked: false, - defaultValue: false, + value: false, forwardedRef: () => {}, }; @@ -69,7 +69,7 @@ class CheckboxWithLabel extends React.Component { constructor(props) { super(props); - this.isChecked = props.defaultValue || props.isChecked; + this.isChecked = props.value || props.isChecked; this.LabelComponent = props.LabelComponent; this.defaultStyles = [styles.flexRow, styles.alignItemsCenter]; this.wrapperStyles = _.isArray(props.style) ? [...this.defaultStyles, ...props.style] : [...this.defaultStyles, props.style]; diff --git a/src/components/Form.js b/src/components/Form.js index f84e9f294450..a8b31d1aed4a 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -152,17 +152,16 @@ class Form extends React.Component { // We clone the child passing down all form props const inputID = child.props.inputID; - const defaultValue = this.props.draftValues[inputID] || child.props.defaultValue; + const value = this.props.draftValues[inputID] || child.props.value; // We want to initialize the input value if it's undefined if (_.isUndefined(this.state.inputValues[inputID])) { - this.state.inputValues[inputID] = defaultValue; + this.state.inputValues[inputID] = value; } return React.cloneElement(child, { ref: node => this.inputRefs[inputID] = node, - defaultValue, - value: this.state.inputValues[inputID], + value: child.props.value || this.state.inputValues[inputID], errorText: this.state.errors[inputID] || '', onBlur: () => { this.setTouchedInput(inputID); diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index dde95741bac8..2178f8be7f9e 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -67,12 +67,18 @@ class ProfilePage extends Component { this.defaultAvatar = ReportUtils.getDefaultAvatar(this.props.currentUserPersonalDetails.login); this.avatar = {uri: lodashGet(this.props.currentUserPersonalDetails, 'avatar') || this.defaultAvatar}; - this.pronouns = props.currentUserPersonalDetails.pronouns; + + const hasSelfSelectedPronouns = !_.isEmpty(props.currentUserPersonalDetails.pronouns) && !props.currentUserPersonalDetails.pronouns.startsWith(CONST.PRONOUNS.PREFIX); + this.state = { logins: this.getLogins(props.loginList), selectedTimezone: lodashGet(props.currentUserPersonalDetails.timezone, 'selected', CONST.DEFAULT_TIME_ZONE.selected), isAutomaticTimezone: lodashGet(props.currentUserPersonalDetails.timezone, 'automatic', CONST.DEFAULT_TIME_ZONE.automatic), - hasSelfSelectedPronouns: !_.isEmpty(props.currentUserPersonalDetails.pronouns) && !props.currentUserPersonalDetails.pronouns.startsWith(CONST.PRONOUNS.PREFIX), + pronouns: hasSelfSelectedPronouns ? '' : props.currentUserPersonalDetails.pronouns, + hasSelfSelectedPronouns, + logins: this.getLogins(props.loginList), + selectedTimezone: lodashGet(props.currentUserPersonalDetails.timezone, 'selected', CONST.DEFAULT_TIME_ZONE.selected), + isAutomaticTimezone: lodashGet(props.currentUserPersonalDetails.timezone, 'automatic', CONST.DEFAULT_TIME_ZONE.automatic), }; this.getLogins = this.getLogins.bind(this); @@ -140,7 +146,7 @@ class ProfilePage extends Component { PersonalDetails.updateProfile( values.firstName.trim(), values.lastName.trim(), - (this.state.hasSelfSelectedPronouns) ? values.selfSelectedPronoun.trim() : values.pronouns.trim(), + (this.state.pronouns === CONST.PRONOUNS.SELF_SELECT) ? values.selfSelectedPronoun.trim() : values.pronouns.trim(), { automatic: values.isAutomaticTimezone, selected: values.timezone, @@ -167,9 +173,10 @@ class ProfilePage extends Component { ); const hasSelfSelectedPronouns = values.pronouns === CONST.PRONOUNS.SELF_SELECT; - this.pronouns = hasSelfSelectedPronouns ? '' : values.pronouns; + this.setState({ hasSelfSelectedPronouns, + pronouns: hasSelfSelectedPronouns ? values.selfSelectedPronoun : values.pronouns, isAutomaticTimezone: values.isAutomaticTimezone, selectedTimezone: values.isAutomaticTimezone ? moment.tz.guess() : values.timezone, }); @@ -195,7 +202,6 @@ class ProfilePage extends Component { value: `${CONST.PRONOUNS.PREFIX}${key}`, })); const currentUserDetails = this.props.currentUserPersonalDetails || {}; - const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.pronouns; return ( @@ -237,7 +243,7 @@ class ProfilePage extends Component { inputID="firstName" name="fname" label={this.props.translate('common.firstName')} - defaultValue={lodashGet(currentUserDetails, 'firstName', '')} + value={lodashGet(currentUserDetails, 'firstName', '')} placeholder={this.props.translate('profilePage.john')} /> @@ -246,7 +252,7 @@ class ProfilePage extends Component { inputID="lastName" name="lname" label={this.props.translate('common.lastName')} - defaultValue={lodashGet(currentUserDetails, 'lastName', '')} + value={lodashGet(currentUserDetails, 'lastName', '')} placeholder={this.props.translate('profilePage.doe')} /> @@ -260,13 +266,13 @@ class ProfilePage extends Component { value: '', label: this.props.translate('profilePage.selectYourPronouns'), }} - value={pronounsPickerValue} + value={this.state.pronouns} /> {this.state.hasSelfSelectedPronouns && ( @@ -276,13 +282,13 @@ class ProfilePage extends Component { label={this.props.translate('profilePage.emailAddress')} type="email" login={this.state.logins.email} - defaultValue={this.state.logins.email} + value={this.state.logins.email} /> From cbd0d640697bd6692deda5e53b50fb102c9fb694 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 5 Oct 2022 04:09:10 +0530 Subject: [PATCH 07/26] Revert "remove default value" This reverts commit c5ce2d3c2e2c165b28c32d9822a58dffe0775615. --- src/components/CheckboxWithLabel.js | 8 +++--- src/components/Form.js | 7 +++--- src/pages/settings/Profile/ProfilePage.js | 30 +++++++++-------------- 3 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index eddbb40252e9..6ac3180e174c 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -40,8 +40,8 @@ const propTypes = { /** Error text to display */ errorText: PropTypes.string, - /** The value for the checkbox */ - value: PropTypes.bool, + /** The default value for the checkbox */ + defaultValue: PropTypes.bool, /** React ref being forwarded to the Checkbox input */ forwardedRef: PropTypes.func, @@ -61,7 +61,7 @@ const defaultProps = { errorText: '', shouldSaveDraft: false, isChecked: false, - value: false, + defaultValue: false, forwardedRef: () => {}, }; @@ -69,7 +69,7 @@ class CheckboxWithLabel extends React.Component { constructor(props) { super(props); - this.isChecked = props.value || props.isChecked; + this.isChecked = props.defaultValue || props.isChecked; this.LabelComponent = props.LabelComponent; this.defaultStyles = [styles.flexRow, styles.alignItemsCenter]; this.wrapperStyles = _.isArray(props.style) ? [...this.defaultStyles, ...props.style] : [...this.defaultStyles, props.style]; diff --git a/src/components/Form.js b/src/components/Form.js index a8b31d1aed4a..f84e9f294450 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -152,16 +152,17 @@ class Form extends React.Component { // We clone the child passing down all form props const inputID = child.props.inputID; - const value = this.props.draftValues[inputID] || child.props.value; + const defaultValue = this.props.draftValues[inputID] || child.props.defaultValue; // We want to initialize the input value if it's undefined if (_.isUndefined(this.state.inputValues[inputID])) { - this.state.inputValues[inputID] = value; + this.state.inputValues[inputID] = defaultValue; } return React.cloneElement(child, { ref: node => this.inputRefs[inputID] = node, - value: child.props.value || this.state.inputValues[inputID], + defaultValue, + value: this.state.inputValues[inputID], errorText: this.state.errors[inputID] || '', onBlur: () => { this.setTouchedInput(inputID); diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 2178f8be7f9e..dde95741bac8 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -67,18 +67,12 @@ class ProfilePage extends Component { this.defaultAvatar = ReportUtils.getDefaultAvatar(this.props.currentUserPersonalDetails.login); this.avatar = {uri: lodashGet(this.props.currentUserPersonalDetails, 'avatar') || this.defaultAvatar}; - - const hasSelfSelectedPronouns = !_.isEmpty(props.currentUserPersonalDetails.pronouns) && !props.currentUserPersonalDetails.pronouns.startsWith(CONST.PRONOUNS.PREFIX); - + this.pronouns = props.currentUserPersonalDetails.pronouns; this.state = { logins: this.getLogins(props.loginList), selectedTimezone: lodashGet(props.currentUserPersonalDetails.timezone, 'selected', CONST.DEFAULT_TIME_ZONE.selected), isAutomaticTimezone: lodashGet(props.currentUserPersonalDetails.timezone, 'automatic', CONST.DEFAULT_TIME_ZONE.automatic), - pronouns: hasSelfSelectedPronouns ? '' : props.currentUserPersonalDetails.pronouns, - hasSelfSelectedPronouns, - logins: this.getLogins(props.loginList), - selectedTimezone: lodashGet(props.currentUserPersonalDetails.timezone, 'selected', CONST.DEFAULT_TIME_ZONE.selected), - isAutomaticTimezone: lodashGet(props.currentUserPersonalDetails.timezone, 'automatic', CONST.DEFAULT_TIME_ZONE.automatic), + hasSelfSelectedPronouns: !_.isEmpty(props.currentUserPersonalDetails.pronouns) && !props.currentUserPersonalDetails.pronouns.startsWith(CONST.PRONOUNS.PREFIX), }; this.getLogins = this.getLogins.bind(this); @@ -146,7 +140,7 @@ class ProfilePage extends Component { PersonalDetails.updateProfile( values.firstName.trim(), values.lastName.trim(), - (this.state.pronouns === CONST.PRONOUNS.SELF_SELECT) ? values.selfSelectedPronoun.trim() : values.pronouns.trim(), + (this.state.hasSelfSelectedPronouns) ? values.selfSelectedPronoun.trim() : values.pronouns.trim(), { automatic: values.isAutomaticTimezone, selected: values.timezone, @@ -173,10 +167,9 @@ class ProfilePage extends Component { ); const hasSelfSelectedPronouns = values.pronouns === CONST.PRONOUNS.SELF_SELECT; - + this.pronouns = hasSelfSelectedPronouns ? '' : values.pronouns; this.setState({ hasSelfSelectedPronouns, - pronouns: hasSelfSelectedPronouns ? values.selfSelectedPronoun : values.pronouns, isAutomaticTimezone: values.isAutomaticTimezone, selectedTimezone: values.isAutomaticTimezone ? moment.tz.guess() : values.timezone, }); @@ -202,6 +195,7 @@ class ProfilePage extends Component { value: `${CONST.PRONOUNS.PREFIX}${key}`, })); const currentUserDetails = this.props.currentUserPersonalDetails || {}; + const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.pronouns; return ( @@ -243,7 +237,7 @@ class ProfilePage extends Component { inputID="firstName" name="fname" label={this.props.translate('common.firstName')} - value={lodashGet(currentUserDetails, 'firstName', '')} + defaultValue={lodashGet(currentUserDetails, 'firstName', '')} placeholder={this.props.translate('profilePage.john')} /> @@ -252,7 +246,7 @@ class ProfilePage extends Component { inputID="lastName" name="lname" label={this.props.translate('common.lastName')} - value={lodashGet(currentUserDetails, 'lastName', '')} + defaultValue={lodashGet(currentUserDetails, 'lastName', '')} placeholder={this.props.translate('profilePage.doe')} /> @@ -266,13 +260,13 @@ class ProfilePage extends Component { value: '', label: this.props.translate('profilePage.selectYourPronouns'), }} - value={this.state.pronouns} + value={pronounsPickerValue} /> {this.state.hasSelfSelectedPronouns && ( @@ -282,13 +276,13 @@ class ProfilePage extends Component { label={this.props.translate('profilePage.emailAddress')} type="email" login={this.state.logins.email} - value={this.state.logins.email} + defaultValue={this.state.logins.email} /> From abd5f7d5a76a9ab6d61ce8f238030cdc09517661 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 5 Oct 2022 04:16:03 +0530 Subject: [PATCH 08/26] use default value for pickers --- src/components/Form.js | 1 - src/pages/settings/Profile/ProfilePage.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index f84e9f294450..63a679c96c95 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -161,7 +161,6 @@ class Form extends React.Component { return React.cloneElement(child, { ref: node => this.inputRefs[inputID] = node, - defaultValue, value: this.state.inputValues[inputID], errorText: this.state.errors[inputID] || '', onBlur: () => { diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index dde95741bac8..7a6d9fe0fad8 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -260,7 +260,7 @@ class ProfilePage extends Component { value: '', label: this.props.translate('profilePage.selectYourPronouns'), }} - value={pronounsPickerValue} + defaultValue={pronounsPickerValue} /> {this.state.hasSelfSelectedPronouns && ( @@ -290,7 +290,7 @@ class ProfilePage extends Component { label={this.props.translate('profilePage.timezone')} items={timezones} isDisabled={this.state.isAutomaticTimezone} - value={this.state.selectedTimezone} + defaultValue={this.state.selectedTimezone} /> Date: Wed, 5 Oct 2022 05:03:24 +0530 Subject: [PATCH 09/26] use props.value in Form --- src/components/Form.js | 2 +- src/pages/settings/Profile/ProfilePage.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index 63a679c96c95..32046fc3012d 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -161,7 +161,7 @@ class Form extends React.Component { return React.cloneElement(child, { ref: node => this.inputRefs[inputID] = node, - value: this.state.inputValues[inputID], + value: child.props.value || this.state.inputValues[inputID], errorText: this.state.errors[inputID] || '', onBlur: () => { this.setTouchedInput(inputID); diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 7a6d9fe0fad8..e3601e92f44a 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -196,7 +196,7 @@ class ProfilePage extends Component { })); const currentUserDetails = this.props.currentUserPersonalDetails || {}; const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.pronouns; - + console.log(this.state.selectedTimezone) return ( Date: Wed, 5 Oct 2022 05:06:07 +0530 Subject: [PATCH 10/26] remove console log --- src/pages/settings/Profile/ProfilePage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index e3601e92f44a..66778143eb58 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -196,7 +196,7 @@ class ProfilePage extends Component { })); const currentUserDetails = this.props.currentUserPersonalDetails || {}; const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.pronouns; - console.log(this.state.selectedTimezone) + return ( Date: Wed, 5 Oct 2022 05:37:18 +0530 Subject: [PATCH 11/26] allow form consumer to get the value changes --- src/components/Form.js | 10 +++++++++- src/pages/settings/Profile/ProfilePage.js | 1 + 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Form.js b/src/components/Form.js index 32046fc3012d..924907ff9464 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -159,9 +159,13 @@ class Form extends React.Component { this.state.inputValues[inputID] = defaultValue; } + if (!_.isUndefined(child.props.value)) { + this.state.inputValues[inputID] = child.props.value; + } + return React.cloneElement(child, { ref: node => this.inputRefs[inputID] = node, - value: child.props.value || this.state.inputValues[inputID], + value: this.state.inputValues[inputID], errorText: this.state.errors[inputID] || '', onBlur: () => { this.setTouchedInput(inputID); @@ -179,6 +183,10 @@ class Form extends React.Component { if (child.props.shouldSaveDraft) { FormActions.setDraftValues(this.props.formID, {[inputKey]: value}); } + + if (child.props.onInputChange) { + child.props.onInputChange(value); + } }, }); }); diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 66778143eb58..c524a7895dab 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -291,6 +291,7 @@ class ProfilePage extends Component { items={timezones} isDisabled={this.state.isAutomaticTimezone} value={this.state.selectedTimezone} + onInputChange={(selectedTimezone) => this.setState({selectedTimezone})} /> Date: Wed, 5 Oct 2022 02:33:44 +0200 Subject: [PATCH 12/26] fix form stories --- src/stories/Form.stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index 341b132dd2aa..da684206f204 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -34,7 +34,7 @@ const Template = (args) => { // Form consumes data from Onyx, so we initialize Onyx with the necessary data here NetworkConnection.setOfflineStatus(false); FormActions.setIsLoading(args.formID, args.formState.isLoading); - FormActions.setErrorMessage(args.formID, args.formState.error); + FormActions.setErrors(args.formID, args.formState.error); FormActions.setDraftValues(args.formID, args.draftValues); return ( @@ -132,7 +132,7 @@ const WithNativeEventHandler = (args) => { // Form consumes data from Onyx, so we initialize Onyx with the necessary data here NetworkConnection.setOfflineStatus(false); FormActions.setIsLoading(args.formID, args.formState.isLoading); - FormActions.setErrorMessage(args.formID, args.formState.error); + FormActions.setErrors(args.formID, args.formState.error); FormActions.setDraftValues(args.formID, args.draftValues); return ( From 86367a21fdb688415b751f0fbd05d562913a96a7 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 5 Oct 2022 02:57:48 +0200 Subject: [PATCH 13/26] add onInputChange to picker stories --- src/stories/Picker.stories.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/stories/Picker.stories.js b/src/stories/Picker.stories.js index dd26adebc484..4e62d3ca5947 100644 --- a/src/stories/Picker.stories.js +++ b/src/stories/Picker.stories.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import Picker from '../components/Picker'; /** @@ -12,7 +12,16 @@ const story = { }; // eslint-disable-next-line react/jsx-props-no-spreading -const Template = args => ; +const Template = args => { + const [value, setValue] = useState(''); + return ( + setValue(value)} + {...args} + /> + ); +} // Arguments can be passed to the component by binding // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args @@ -21,7 +30,6 @@ const Default = Template.bind({}); Default.args = { label: 'Default picker', name: 'Default', - onInputChange: () => {}, items: [ { label: 'Orange', @@ -38,7 +46,6 @@ const PickerWithValue = Template.bind({}); PickerWithValue.args = { label: 'Picker with defined value', name: 'Picker with defined value', - onInputChange: () => {}, value: 'apple', items: [ { @@ -57,7 +64,6 @@ ErrorStory.args = { label: 'Picker with error', name: 'PickerWithError', errorText: 'This field has an error.', - onInputChange: () => {}, items: [ { label: 'Orange', @@ -75,7 +81,6 @@ Disabled.args = { label: 'Picker disabled', name: 'Disabled', isDisabled: true, - onInputChange: () => {}, items: [ { label: 'Orange', From 121d7b19c01be33b13934208f33523cf28b78855 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 5 Oct 2022 03:11:23 +0200 Subject: [PATCH 14/26] eslint --- src/pages/settings/Profile/ProfilePage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index c524a7895dab..f29e8d4f7112 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -291,7 +291,7 @@ class ProfilePage extends Component { items={timezones} isDisabled={this.state.isAutomaticTimezone} value={this.state.selectedTimezone} - onInputChange={(selectedTimezone) => this.setState({selectedTimezone})} + onInputChange={selectedTimezone => this.setState({selectedTimezone})} /> Date: Wed, 5 Oct 2022 03:16:31 +0200 Subject: [PATCH 15/26] eslint --- src/stories/Picker.stories.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/stories/Picker.stories.js b/src/stories/Picker.stories.js index 4e62d3ca5947..9a7a0ea88c4b 100644 --- a/src/stories/Picker.stories.js +++ b/src/stories/Picker.stories.js @@ -12,16 +12,17 @@ const story = { }; // eslint-disable-next-line react/jsx-props-no-spreading -const Template = args => { +const Template = (args) => { const [value, setValue] = useState(''); return ( setValue(value)} + onInputChange={e => setValue(e)} + // eslint-disable-next-line react/jsx-props-no-spreading {...args} /> ); -} +}; // Arguments can be passed to the component by binding // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args From 324153146275507a3022928d9f76df2f9c67cdf8 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 5 Oct 2022 23:10:05 +0530 Subject: [PATCH 16/26] rename custom callback onInputChange to onValueChange --- src/components/Form.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index 924907ff9464..d30b969fd3e9 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -184,8 +184,8 @@ class Form extends React.Component { FormActions.setDraftValues(this.props.formID, {[inputKey]: value}); } - if (child.props.onInputChange) { - child.props.onInputChange(value); + if (child.props.onValueChange) { + child.props.onValueChange(value); } }, }); From f9d5c4d5db93870c1705e995482286434c9d62a9 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 5 Oct 2022 23:10:58 +0530 Subject: [PATCH 17/26] cleanup hack --- src/pages/settings/Profile/ProfilePage.js | 26 +++++++++++++++-------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index f29e8d4f7112..dd47f5cacfba 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -166,14 +166,6 @@ class ProfilePage extends Component { [values.firstName, values.lastName, values.pronouns], ); - const hasSelfSelectedPronouns = values.pronouns === CONST.PRONOUNS.SELF_SELECT; - this.pronouns = hasSelfSelectedPronouns ? '' : values.pronouns; - this.setState({ - hasSelfSelectedPronouns, - isAutomaticTimezone: values.isAutomaticTimezone, - selectedTimezone: values.isAutomaticTimezone ? moment.tz.guess() : values.timezone, - }); - if (hasFirstNameError) { errors.firstName = Localize.translateLocal('personalDetails.error.characterLimit', {limit: CONST.FORM_CHARACTER_LIMIT}); } @@ -261,6 +253,16 @@ class ProfilePage extends Component { label: this.props.translate('profilePage.selectYourPronouns'), }} defaultValue={pronounsPickerValue} + onValueChange={pronouns => { + const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT; + this.pronouns = hasSelfSelectedPronouns ? '' : pronouns; + + if (this.state.hasSelfSelectedPronouns === hasSelfSelectedPronouns) { + return; + } + + this.setState({hasSelfSelectedPronouns}); + }} /> {this.state.hasSelfSelectedPronouns && ( @@ -291,13 +293,19 @@ class ProfilePage extends Component { items={timezones} isDisabled={this.state.isAutomaticTimezone} value={this.state.selectedTimezone} - onInputChange={selectedTimezone => this.setState({selectedTimezone})} + onValueChange={selectedTimezone => this.setState({selectedTimezone})} /> this.setState(prevState => { + return { + isAutomaticTimezone, + selectedTimezone: isAutomaticTimezone ? moment.tz.guess() : prevState.selectedTimezone, + }; + })} /> From 008a2695316fc917a5379cd93bb47676f8ed32d5 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 5 Oct 2022 23:24:03 +0530 Subject: [PATCH 18/26] fix lint errors --- src/pages/settings/Profile/ProfilePage.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index dd47f5cacfba..aab4ddf0d30e 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -253,7 +253,7 @@ class ProfilePage extends Component { label: this.props.translate('profilePage.selectYourPronouns'), }} defaultValue={pronounsPickerValue} - onValueChange={pronouns => { + onValueChange={(pronouns) => { const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT; this.pronouns = hasSelfSelectedPronouns ? '' : pronouns; @@ -300,12 +300,10 @@ class ProfilePage extends Component { inputID="isAutomaticTimezone" label={this.props.translate('profilePage.setMyTimezoneAutomatically')} defaultValue={this.state.isAutomaticTimezone} - onValueChange={isAutomaticTimezone => this.setState(prevState => { - return { - isAutomaticTimezone, - selectedTimezone: isAutomaticTimezone ? moment.tz.guess() : prevState.selectedTimezone, - }; - })} + onValueChange={isAutomaticTimezone => this.setState(prevState => ({ + isAutomaticTimezone, + selectedTimezone: isAutomaticTimezone ? moment.tz.guess() : prevState.selectedTimezone, + }))} /> From 0b1dedfe7af05f105e646b62bc081393b899d26d Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 6 Oct 2022 01:16:31 +0530 Subject: [PATCH 19/26] refactor: don't pass inputID --- src/components/Picker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js index 929e2ad0ee77..71b46f140257 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker/index.js @@ -62,7 +62,7 @@ class Picker extends PureComponent { */ onInputChange(value, index) { if (this.props.inputID) { - this.props.onInputChange(value, this.props.inputID); + this.props.onInputChange(value); return; } From 84eaffb087367a9a22443ad7a6bbbd0205978ef7 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 6 Oct 2022 01:52:22 +0530 Subject: [PATCH 20/26] refactor: move callback to named function --- src/pages/settings/Profile/ProfilePage.js | 47 ++++++++++++++++------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index ed8481bcc8b8..dbef76d81d0f 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -78,6 +78,8 @@ class ProfilePage extends Component { this.getLogins = this.getLogins.bind(this); this.validate = this.validate.bind(this); this.updatePersonalDetails = this.updatePersonalDetails.bind(this); + this.setPronouns = this.setPronouns.bind(this); + this.setAutomaticTimezone = this.setAutomaticTimezone.bind(this); } componentDidUpdate(prevProps) { @@ -181,6 +183,35 @@ class ProfilePage extends Component { return errors; } + /** + * @param {String} pronouns + */ + setPronouns(pronouns) { + const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT; + this.pronouns = hasSelfSelectedPronouns ? '' : pronouns; + + if (this.state.hasSelfSelectedPronouns === hasSelfSelectedPronouns) { + return; + } + + this.setState({hasSelfSelectedPronouns}); + } + + /** + * Update the timezone picker's value to guessed timezone + * @param {Boolean} isAutomaticTimezone + */ + setAutomaticTimezone(isAutomaticTimezone) { + if (!isAutomaticTimezone) { + return this.setState({isAutomaticTimezone}); + } + + this.setState({ + selectedTimezone: moment.tz.guess(), + isAutomaticTimezone, + }); + } + render() { const pronounsList = _.map(this.props.translate('pronouns'), (value, key) => ({ label: value, @@ -254,16 +285,7 @@ class ProfilePage extends Component { label: this.props.translate('profilePage.selectYourPronouns'), }} defaultValue={pronounsPickerValue} - onValueChange={(pronouns) => { - const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT; - this.pronouns = hasSelfSelectedPronouns ? '' : pronouns; - - if (this.state.hasSelfSelectedPronouns === hasSelfSelectedPronouns) { - return; - } - - this.setState({hasSelfSelectedPronouns}); - }} + onValueChange={this.setPronouns} /> {this.state.hasSelfSelectedPronouns && ( @@ -301,10 +323,7 @@ class ProfilePage extends Component { inputID="isAutomaticTimezone" label={this.props.translate('profilePage.setMyTimezoneAutomatically')} defaultValue={this.state.isAutomaticTimezone} - onValueChange={isAutomaticTimezone => this.setState(prevState => ({ - isAutomaticTimezone, - selectedTimezone: isAutomaticTimezone ? moment.tz.guess() : prevState.selectedTimezone, - }))} + onValueChange={this.setAutomaticTimezone} /> From 48e1c3ff67e2ed7a04f63fc5d3d9cc59a510ba21 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 6 Oct 2022 02:30:07 +0530 Subject: [PATCH 21/26] fix: eslint errors --- src/pages/settings/Profile/ProfilePage.js | 59 ++++++++++++----------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index dbef76d81d0f..e6ee4c6fe61e 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -98,6 +98,36 @@ class ProfilePage extends Component { this.setState(stateToUpdate); } + /** + * @param {String} pronouns + */ + setPronouns(pronouns) { + const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT; + this.pronouns = hasSelfSelectedPronouns ? '' : pronouns; + + if (this.state.hasSelfSelectedPronouns === hasSelfSelectedPronouns) { + return; + } + + this.setState({hasSelfSelectedPronouns}); + } + + /** + * Update the timezone picker's value to guessed timezone + * @param {Boolean} isAutomaticTimezone + */ + setAutomaticTimezone(isAutomaticTimezone) { + if (!isAutomaticTimezone) { + this.setState({isAutomaticTimezone}); + return; + } + + this.setState({ + selectedTimezone: moment.tz.guess(), + isAutomaticTimezone, + }); + } + /** * Get the most validated login of each type * @@ -183,35 +213,6 @@ class ProfilePage extends Component { return errors; } - /** - * @param {String} pronouns - */ - setPronouns(pronouns) { - const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT; - this.pronouns = hasSelfSelectedPronouns ? '' : pronouns; - - if (this.state.hasSelfSelectedPronouns === hasSelfSelectedPronouns) { - return; - } - - this.setState({hasSelfSelectedPronouns}); - } - - /** - * Update the timezone picker's value to guessed timezone - * @param {Boolean} isAutomaticTimezone - */ - setAutomaticTimezone(isAutomaticTimezone) { - if (!isAutomaticTimezone) { - return this.setState({isAutomaticTimezone}); - } - - this.setState({ - selectedTimezone: moment.tz.guess(), - isAutomaticTimezone, - }); - } - render() { const pronounsList = _.map(this.props.translate('pronouns'), (value, key) => ({ label: value, From 8a1917815502d9df7b7e2a6b8a775100da5d8937 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 6 Oct 2022 02:39:38 +0530 Subject: [PATCH 22/26] docs: remove defaultValue, and add value --- contributingGuides/FORMS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributingGuides/FORMS.md b/contributingGuides/FORMS.md index 2f4c217ad422..6460ccb097ed 100644 --- a/contributingGuides/FORMS.md +++ b/contributingGuides/FORMS.md @@ -207,7 +207,7 @@ The following prop is available to form inputs: Form.js will automatically provide the following props to any input with the inputID prop. - ref: A React ref that must be attached to the input. -- defaultValue: The input default value. +- value: The input value. - errorText: The translated error text that is returned by validate for that specific input. - onBlur: An onBlur handler that calls validate. - onInputChange: An onChange handler that saves draft values and calls validate for that input (inputA). Passing an inputID as a second param allows inputA to manipulate the input value of the provided inputID (inputB). From 63eb748028e8089008377df4df546a12e8788128 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 6 Oct 2022 02:50:45 +0530 Subject: [PATCH 23/26] docs: add all props available for form inputs --- contributingGuides/FORMS.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/contributingGuides/FORMS.md b/contributingGuides/FORMS.md index 6460ccb097ed..b1dcf2dd675b 100644 --- a/contributingGuides/FORMS.md +++ b/contributingGuides/FORMS.md @@ -203,6 +203,10 @@ function onSubmit(values) { The following prop is available to form inputs: - inputID: An unique identifier for the input. +- shouldSaveDraft: Saves a draft of the input value. +- defaultValue: The initial value of the input. +- value: The value to show for the input. +- onValueChange: A callback that is called when the input's value changes. Form.js will automatically provide the following props to any input with the inputID prop. From 22a67c48f01805f6aaa41a63213a01dd0003e612 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 6 Oct 2022 16:55:46 +0300 Subject: [PATCH 24/26] fix typo --- src/components/Picker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js index 71b46f140257..4dc676966827 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker/index.js @@ -30,7 +30,7 @@ const propTypes = { /** Saves a draft of the input value when used in a form */ shouldSaveDraft: PropTypes.bool, - /** A callback method that is called when the value changes and it received the selected value as an argument */ + /** A callback method that is called when the value changes and it receives the selected value as an argument */ onInputChange: PropTypes.func.isRequired, }; From 0f2b844dbf4eb52ca7e81b20cbf37751de31d8b5 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 7 Oct 2022 00:44:49 +0530 Subject: [PATCH 25/26] fix: pickers on company info page --- src/pages/ReimbursementAccount/CompanyStep.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 4c806b821f7e..5edcc7c53c6a 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -256,7 +256,7 @@ class CompanyStep extends React.Component { label={this.props.translate('companyStep.companyType')} items={_.map(this.props.translate('companyStep.incorporationTypes'), (label, value) => ({value, label}))} onInputChange={value => this.clearErrorAndSetValue('incorporationType', value)} - defaultValue={this.state.incorporationType} + value={this.state.incorporationType} placeholder={{value: '', label: '-'}} errorText={this.getErrorText('incorporationType')} /> @@ -275,7 +275,7 @@ class CompanyStep extends React.Component { this.clearErrorAndSetValue('incorporationState', value)} - defaultValue={this.state.incorporationState} + value={this.state.incorporationState} errorText={this.getErrorText('incorporationState')} /> From ddb50ea5170dd9f52e5a76888f989c5b15375432 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 7 Oct 2022 02:07:33 +0530 Subject: [PATCH 26/26] fix: picker closing before clicking done on ios --- src/components/Picker/BasePicker/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index 07a5cf86c2bc..a34b523f383d 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -29,7 +29,6 @@ class BasePicker extends React.Component { useNativeAndroidPickerStyle={false} placeholder={this.props.placeholder} value={this.props.value} - key={this.props.value} Icon={() => this.props.icon(this.props.size)} disabled={this.props.disabled} fixAndroidTouchableBug