You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
With the useInput Hook, when I unselect the date, the input field stays empty, when I empty the InputField, the selectedDate is reset to the initialDate.
Expected Behavior
Regardless of unselecting a date or deleting the whole date from the input, no date should be selected as long as the required attribute is not set.
Actual Behavior
After blurring the InputField it gets filled with the initial date again. Even if it looks in the Day Picker that the day was unselected by the InputField
(btw. I love how they play together and update each other on selecting/writing dates, great job!)
import React from 'react';
import { DayPicker, useInput } from 'react-day-picker';
import 'react-day-picker/dist/style.css';
export function App() {
const { dayPickerProps, inputProps } = useInput({
defaultSelected: new Date(),
format: 'dd/MM/yyyy',
});
const handleEmpty = ( e ) => {
if ( !e.target.value ) {
return;
}
inputProps.onBlur( e );
};
return (
<div>
<input {...inputProps} onBlur={ handleEmpty } />
<DayPicker {...dayPickerProps} />
</div>
);
}
And this might be the place to add the change to make it happen (useInput.ts:141):
// Special case for _required_ fields: on blur, if the value of the input is not
// a valid date, reset the calendar and the input value.
const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
const value = e.target.value;
if(!required && !value.length) {
return;
}
const day = parseValue(value);
if (!isValidDate(day)) {
reset();
}
};
Repository owner
locked and limited conversation to collaborators
May 28, 2024
Description
With the useInput Hook, when I unselect the date, the input field stays empty, when I empty the InputField, the selectedDate is reset to the initialDate.
Expected Behavior
Regardless of unselecting a date or deleting the whole date from the input, no date should be selected as long as the required attribute is not set.
Actual Behavior
After blurring the InputField it gets filled with the initial date again. Even if it looks in the Day Picker that the day was unselected by the InputField
(btw. I love how they play together and update each other on selecting/writing dates, great job!)
Steps to Reproduce
In https://playcode.io/react:
Possible Solution
Screenshots
If applicable, add screenshots or GIFs to help explain your problem.
Your Environment
The text was updated successfully, but these errors were encountered: