Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot reset value #760

Open
michalzubkowicz opened this issue Dec 12, 2020 · 10 comments · May be fixed by #840
Open

Cannot reset value #760

michalzubkowicz opened this issue Dec 12, 2020 · 10 comments · May be fixed by #840

Comments

@michalzubkowicz
Copy link

michalzubkowicz commented Dec 12, 2020

I'm Submitting a ...

[X ] Bug report
[ ] Feature request
[ ] Support request

Steps to Reproduce

export const RangeDateTimePicker: FunctionComponent<RangeDateTimePickerProps> = observer((props) => {
    const [firstTimeSeenFromValue, setFirstTimeSeenFrom] = useState('');
    return <div>
        <button onClick={() => setFirstTimeSeenFrom('')}>Reset</button>
        <div>
            <Datetime
                closeOnSelect={true}
                value={firstTimeSeenFromValue}
                onChange={(v => setFirstTimeSeenFrom(v as any))}
            />
        </div>

Expected Results

Value should be empty

Actual Results

Nothing happens

@ganz14
Copy link

ganz14 commented Dec 17, 2020

@michalzubkowicz do u able to find some work around ? facing same issue

@michalzubkowicz
Copy link
Author

@ganz14,
Quick and dirty - add key property
<Datetime key={'nameofpicker' + value?.getDate}

Where value is value of datepicker from state. It will completely rerender component on date change.

@emjoseph
Copy link

Facing the same issue as well.

@naeem-gitonga
Copy link

@michalzubkowicz what is the 'nameofpicker'? I tried using a ref, a "name" property, nothing seemed to work, even using what you posted 'nameofpicker ...'

@fluent123
Copy link

I had the same issue. It happens when value in <Datetime> component is changed but you try to reset it and put the same value in setState, so state is not changed and render is not called. The solution is to do force update this.forceupdate().
@emjoseph @JNaeemGitonga

@obrejla
Copy link

obrejla commented Mar 9, 2021

Hi, same here...it's really annoying. It can render empty value on at first render, then in case of empty value, it just realizes that it's not a truthy value and uses last selected value instead.

ad

I had the same issue. It happens when value in <Datetime> component is changed but you try to reset it and put the same value in setState, so state is not changed and render is not called. The solution is to do force update this.forceupdate().
@emjoseph @JNaeemGitonga

This is not the case... We are having some valid datetime value in the picker and trying to reset it with empty value so the picker is empty.

The problem is that getInputValue()

getInputValue() {
calls getSelectedDate()
getSelectedDate() {
which tries to parseDate
let selectedDate = this.parseDate( this.props.value, this.getFormat('datetime') );
from the props (i.e. our empty string)...it fallbacks to undefined, because empty string is not truthy and because of that getSelectedDate() returns false...and because of false selected value, then getInputValue() fallbacks to this.state.inputValue
return selectedDate ? selectedDate.format( this.getFormat('datetime') ) : this.state.inputValue;
which returns current value 🤷‍♂️

And, yes...workaround with key={value} works...but... 🤷‍♂️

@obrejla
Copy link

obrejla commented Mar 9, 2021

Btw another possible workaround is to set state.inputValue to empty string in custom reset function, via ref, i.e. something like:

const [value, setValue] = useState('');
const dateInputElement = useRef(null);
...
const myResetFunction = () => {
    dateInputElement.current.state.inputValue = '';
    setValue('');
};
...
<Datetime
    ref={dateInputElement}
    value={value}
/>

@haddadnj
Copy link

+1 on this

@mgedmin
Copy link

mgedmin commented Aug 10, 2022

I didn't like either of the two proposed workarounds, so I came up with a third one:

const datetimeWorkaround = (value) => value === '' ? { value: '' } : {};
...
<Datetime
    value={value}
    inputProps={{
       ...datetimeWorkaround(value),
   }}
 />

Setting inputProps.value overrides whatever DateTime.getInputValue() returns. We want to override only in the erroneous case, otherwise Bad Things happen (e.g. typing breaks as it tries to parse incomplete text as datetimes).

mgedmin added a commit to mgedmin/react-datetime that referenced this issue Aug 10, 2022
When you change the `value` prop to a blank string,
Datetime.getSelectedDate() tries to parse the value using the format
string.  This fails for blank values, and then getSelectedDate() falls
back to the previously entered input value from this.state.inputValue,
ignoring the new `value` prop and making the reset fail.

Closes arqex#760.
@mgedmin mgedmin linked a pull request Aug 10, 2022 that will close this issue
mgedmin added a commit to mgedmin/react-datetime that referenced this issue Aug 10, 2022
@Salman-Kashfy
Copy link

@ganz14, Quick and dirty - add key property <Datetime key={'nameofpicker' + value?.getDate}

Where value is value of datepicker from state. It will completely rerender component on date change.

Your a life saver.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants