Time selection scrolls continuously on clicking on the arrow key

[rajatagarwal]

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 (
           <>
               <Datetime
                    isValidDate={isValidDate}
                    input={false}
                    timeFormat="HH:mm"
                    viewMode="time"
                    timeConstraints={{
                          hours: { min: 0, max: 23 },
                          minutes: { step: 15 }
                    }}
                    onChange={updateCustomSelection}
                />
            </>
       )
   } // 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.

[karls4]

Did you ever find a fix for this?

[rajatagarwal]

No. I changed the approach and used custom widgets.