Fix DatePicker not saving drafts #32815
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,21 @@ | ||
| import {setYear} from 'date-fns'; | ||
| import _ from 'lodash'; | ||
| import PropTypes from 'prop-types'; | ||
| import React, {forwardRef, useState} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import * as Expensicons from '@components/Icon/Expensicons'; | ||
| import refPropTypes from '@components/refPropTypes'; | ||
| import TextInput from '@components/TextInput'; | ||
| import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '@components/TextInput/BaseTextInput/baseTextInputPropTypes'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import CONST from '@src/CONST'; | ||
| import CalendarPicker from './CalendarPicker'; | ||
|
|
||
| const propTypes = { | ||
| /** React ref being forwarded to the DatePicker input */ | ||
| forwardedRef: refPropTypes, | ||
|
|
||
| /** | ||
| * The datepicker supports any value that `new Date()` can parse. | ||
| * `onInputChange` would always be called with a Date (or null) | ||
|
|
@@ -33,7 +36,12 @@ const propTypes = { | |
| /** A maximum date of calendar to select */ | ||
| maxDate: PropTypes.objectOf(Date), | ||
|
|
||
| /** A function that is passed by FormWrapper */ | ||
| onInputChange: PropTypes.func.isRequired, | ||
|
|
||
| /** A function that is passed by FormWrapper */ | ||
| onTouched: PropTypes.func.isRequired, | ||
|
|
||
| ...baseTextInputPropTypes, | ||
| }; | ||
|
|
||
|
|
@@ -44,40 +52,33 @@ const datePickerDefaultProps = { | |
| value: undefined, | ||
| }; | ||
|
|
||
| function DatePicker({forwardedRef, containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, value}) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
| const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined); | ||
|
|
||
|
Comment on lines
-51
to
-56
There was a problem hiding this comment. Removing this useEffect makes the value prop behaves just like defaultValue thus making the DatePicker a non-controllable component (you can't change it's value programmatically). This does not seem to be a problem now so it may not be a blocker but I think we need to at least make it clear that the value prop is only there because it's needed by the FormProvider (and it will not control the datepicker actual value) cc @luacmartins thoughts on the above ^ |
||
| const onSelected = (newValue) => { | ||
| if (_.isFunction(onTouched)) { | ||
| onTouched(); | ||
| } | ||
| if (_.isFunction(onInputChange)) { | ||
| onInputChange(newValue); | ||
| } | ||
| setSelectedDate(newValue); | ||
| }; | ||
|
Comment on lines
-58
to
+68
There was a problem hiding this comment. Any specific reason on why we are calling useEffect(() => {
if (_.isFunction(onTouched)) {
onTouched();
}
if (_.isFunction(onInputChange)) {
onInputChange(selectedDate);
}
}, [selectedDate]); onSelected={setSelectedDate}There was a problem hiding this comment. I disagree that it's called too early. Currently its behaviour is similar to |
||
|
|
||
| return ( | ||
| <View style={styles.datePickerRoot}> | ||
| <View style={[isSmallScreenWidth ? styles.flex2 : {}, styles.pointerEventsNone]}> | ||
| <TextInput | ||
| ref={forwardedRef} | ||
| inputID={inputID} | ||
| forceActiveLabel | ||
| icon={Expensicons.Calendar} | ||
| label={label} | ||
| accessibilityLabel={label} | ||
| role={CONST.ROLE.PRESENTATION} | ||
| value={selectedDate} | ||
| placeholder={placeholder || translate('common.dateFormat')} | ||
| errorText={errorText} | ||
| containerStyles={containerStyles} | ||
|
|
@@ -92,7 +93,7 @@ function DatePicker({containerStyles, defaultValue, disabled, errorText, inputID | |
| minDate={minDate} | ||
| maxDate={maxDate} | ||
| value={selectedDate} | ||
| onSelected={onSelected} | ||
| /> | ||
| </View> | ||
| </View> | ||
|
|
@@ -103,4 +104,14 @@ DatePicker.propTypes = propTypes; | |
| DatePicker.defaultProps = datePickerDefaultProps; | ||
| DatePicker.displayName = 'DatePicker'; | ||
|
|
||
| const DatePickerWithRef = forwardRef((props, ref) => ( | ||
| <DatePicker | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} | ||
| forwardedRef={ref} | ||
| /> | ||
| )); | ||
|
|
||
| DatePickerWithRef.displayName = 'DatePickerWithRef'; | ||
|
|
||
| export default DatePickerWithRef; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
DatePicker needs to be wrapped with React.forwardRef and forward the ref to the inner text input. This is needed since the Form uses that ref to focus and scroll to that element.