arqex / arqex/react-datetime

Time selection scrolls continuously on clicking on the arrow key

Open
#768 2 comments 0 reactions 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

I am using react-datetime's latest version 3.0.4 and react version 16.6.3. Below is the code:

```
renderDateTimePicker() {
const { banDateBefore } = "2020-11-30";

function isValidDate(current){
var tomorrow = moment().add(0, "day");
return current.isBetween(banDateBefore, tomorrow);
}

const updateCustomSelection = (dateValue) => {
// Update since value:
const dateInSeconds = Math.round(Date.parse(dateValue) / 1000);
const todayDateInSeconds = Math.round(new Date().getTime() / 1000);
const customSince = todayDateInSeconds - dateInSeconds;
this.setSinceValue(customSince);
// Update dropdown title
const formattedDate = new Date(dateValue);
const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(formattedDate);
const month = new Intl.DateTimeFormat('en', { month: 'short' }).format(formattedDate);
const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(formattedDate);
const customDate = `Ending ${month}, ${day} ${year}`
this.setDropdownTitle(customDate)
}

return (
<>


)
} // renderDateTimePicker
```

The date part works fine but when I select time, it spins continuously. It doesn't matter if I click on up-arrow or down-arrow.

I am using it with NewRelic hence i don't have much control over the React version I can pick.

### Expected Results
It should not scroll continuously. It should scroll based on mouse click only.

### Actual Results
It scrolls continuously and not letting select time. Check below recording:

https://user-images.githubusercontent.com/4978846/103673564-a56bb780-4f75-11eb-99fb-dd49eee1e316.mov

Additionally, if I close this timepicker widget and go back to it it will show me whatever time was `finally` selected before closing it. Hence it was showing 14:30 on time widget, which is actually from the previous work.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the supplied Datetime component, especially viewMode="time" and the hours and minutes timeConstraints. Trace the time-selection arrow handling and verify that one mouse click produces only one intended increment or decrement. Done means the picker stops scrolling continuously and still permits selecting the desired time.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.