Date value is not modified after setting a valid value with react-form-hook + DatePickerInput

[marcio-b]

Current behaviour

When using the DatePickerInput along with react-hook-form and changing date from the input does not trigger validations allowing for invalid dates like "01/0" or "12/12/2" to pass validations if previously set through the modal using the textInput icon.

Expected behaviour

When used along with react-hook-form, both using the modal and the date input should allow validations to be triggered.

How to reproduce?

• Create a React Native
• install the following dependencies
  • react-native-paper-dates
  • react-native-paper
  • react-hook-form
• Create a controlled component using the Controller component from 'react-hook-form' (can use the below code as starter)
• Set a date using the modal first
• change that date using the input leaving a different (incomplete or invalid) date like "MM/DD/Y"
• notice that date on submit was the one set on the modal first.

<Controller
			control={control}
			rules={{
				required: isRequired,
			}}
			disabled={isDisabled}
			name={name}
			render={({ field: { onChange, onBlur, value, disabled, ref }, fieldState: { error: hasErrored } }) => {
				return (
					<>
						<DatePickerInput
							// FIXED PROPS
							ref={ref}
							disabled={disabled}
							endYear={2100}
							hasError={!!hasErrored}
							hideValidationErrors
							iconColor={hasErrored ? 'red' : 'black'}
							iconSize={24}
							inputMode={'start'}
							locale={'es'}
							mode={'outlined'}
							onChange={onChange}
							// onChangeText={onChange}
							onBlur={onBlur}
							presentationStyle={'pageSheet'}
							startYear={2000}
							value={value}
							// CUSTOMIZABLE PROPS
							label={label}
							placeholder={placeholder}
							validRange={validRange}
							withDateFormatInLabel={showDateFormatInLabel}
						/>
						<HelperText
							type={hasErrored ? 'error' : 'info'}
							visible={!!helpText || !!hasErrored}
						>
							{error ? error.message : helpText}
						</HelperText>
					</>
				);
			}}
		/>

Note1: notice that if you uncomment the onChangeText function, you'll get an error when trying to update the date.
Note2: you will get an updated date only if you fill the date completely on the textInput.

Preview

I will work on setting a screen-recording of this.

What have you tried so far?

• tried using only onChange handler
• tried using only onChangeText handler
• tried using both handlers
• tried re-triggering the validation on the react-hook-form Controller component

Your Environment

software	version
ios	15
android	API 33
react-native	0.74.3
react-native-paper	5.11.6
node	v20.14.0
yarn	3.6.4
expo sdk	not-on-expo

[iM-GeeKy]

PRs are welcome!

[github-actions]

Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can, to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to reproduce the issue with minimal code (link to snack.expo.dev) or a repo on GitHub, and the information about your environment (such as the platform of the device, versions of all the packages etc.).

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[marcio-b]

Hello @iM-GeeKy ! Thank you for your response. Sorry I haven't had the time to create a proper expo snack. I started setting one, but I'm having an issue that unfortunately I can't look at right now. I'm leaving this link as a starter, but I need to fix a different error I'm getting, I'm not very used to expo snacks so I might be doing something very dumb in the middle. Feel free to take a look and update it if necessary.

expo snack

Also, I was not able to set the zod resolver properly, but I believe that it won't be needed to try this issue.

[marcio-b]

Hello @iM-GeeKy ! Thank you for your response. Sorry I haven't had the time to create a proper expo snack. I started setting one, but I'm having an issue that unfortunately I can't look at right now. I'm leaving this link as a starter, but I need to fix a different error I'm getting, I'm not very used to expo snacks so I might be doing something very dumb in the middle. Feel free to take a look and update it if necessary.

expo snack

Also, I was not able to set the zod resolver properly, but I believe that it won't be needed to try this issue.

Issue is fixed. Now the snack is working correctly and steps can be followed.

[iM-GeeKy]

@bmarcio20 Thanks for creating a snack. I'll try to get around to this when I can, but there isn't a ton of help on this repo so if you need it resolved quickly your best bet might be opening a PR. I'm happy to help answer any questions in the mean time.

[marcio-b]

@iM-GeeKy Thank you for your response. I will try to work on a solution once I have my current project a bit more stable. I will leave this issue as a reference and as a tech debt in my project so I can go back to it some time in the future.

[github-actions]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.