arqex / arqex/react-datetime

Cannot manually delete date text if you start at the end of the input field

Open
#666 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2k
Forks
858
PR merge metrics
No merged PRs in 30d

Description

### I'm Submitting a ...

```
[x] Bug report
[ ] Feature request
[ ] Support request
```

### Steps to Reproduce

- Render a `` in controlled mode with `input` and `strict` props
- Select a Date from the dropdown (ex. `11/20/2019 12:00 AM`)
- Click in the input field, move the cursor to the end (after "AM") and try to delete it using the `Backspace` key.

### Expected Results

After the first `Backspace`, the date should be invalid, the `onDateChanged` callback should receive a `string` instead of `moment`, and the date/time text in the input field should appear without the "M" (ex. `11/20/2019 12:00 A`)

### Actual Results

Even with the `M` missing, the date is parsed as valid, and the "M" gets restored (`11/20/2019 12:00 AM`). From the user's standpoint, the `Backspace` key did nothing.

If you move the cursor between the "A" (or "P") and the "M", and press `Backspace` then it will remove that character, and the date will be invalid, as expected.

### Minimal Reproduction of the Problem

```
class Test extends React.Component {
state = {
selectedDate: null
}

setSelectedDate = selectedDate => this.setState({selectedDate})

render() {
return
}
}
```

### Other Information (e.g. stacktraces, related issues, suggestions how to fix)

This may be an issue with the "strict" parsing in `moment`, since it thinks this is ok:

```
> moment('11/20/2019 12:00 A', 'MM/DD/YYYY h:mm A', true).isValid()
true
```
That said, there should be some way to manually edit the value using `Backspace` without having to resort to using `Datetime` as an uncontrolled component.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.