search

web-ridge / react-native-paper-dates

Smooth and fast cross platform Material Design date and time picker for React Native Paper
https://www.reactnativepaperdates.com
MIT License
657 stars 170 forks source link

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

Open bmarcio20 opened 3 weeks ago

bmarcio20 commented 3 weeks ago

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?

<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?

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 commented 3 weeks ago

PRs are welcome!

github-actions[bot] commented 3 weeks ago

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[bot] commented 3 weeks ago

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.

bmarcio20 commented 3 weeks ago

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.

bmarcio20 commented 3 weeks ago

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 commented 3 weeks ago

@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.

bmarcio20 commented 2 weeks ago

@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.