Datepicker crashes with non-standard time intervals (Hacker0x01#2172)

added more logic to time.jsx to account for non standard time intervals resolves Hacker0x01#2169 Co-authored-by: Branford Harris <[email protected]>
p-rogas · Jun 6, 2020 · 1213f33 · 1213f33
1 parent bf00dfe
commit 1213f33
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/src/time.jsx b/src/time.jsx
@@ -133,6 +133,7 @@ export default class Time extends React.Component {
       this.props.injectTimes.sort(function(a, b) {
         return a - b;
       });
+    const centerLiTargetList = [];
     for (let i = 0; i < multiplier; i++) {
       const currentTime = addMinutes(base, i * intervals);
       times.push(currentTime);
@@ -147,6 +148,10 @@ export default class Time extends React.Component {
         );
         times = times.concat(timesToInject);
       }
+
+      if (currH === getHours(currentTime)) {
+        centerLiTargetList.push(currentTime);
+      }
     }
 
     return times.map((time, i) => (
@@ -155,8 +160,15 @@ export default class Time extends React.Component {
         onClick={this.handleClick.bind(this, time)}
         className={this.liClasses(time, currH, currM)}
         ref={li => {
-          if (currH === getHours(time) && currM >= getMinutes(time)) {
-            this.centerLi = li;
+          if (currH === getHours(time)) {
+            if (currM >= getMinutes(time)) {
+              this.centerLi = li;
+            } else if (
+              !this.centerLi &&
+              centerLiTargetList.indexOf(time) === centerLiTargetList.length - 1
+            ) {
+              this.centerLi = li;
+            }
           }
         }}
       >

diff --git a/test/timepicker_test.js b/test/timepicker_test.js
@@ -87,6 +87,32 @@ describe("TimePicker", () => {
     );
   });
 
+  it("should handle 40 min time intervals", () => {
+    renderDatePicker("February 28, 2018 9:00 AM", {
+      timeIntervals: 40,
+      showTimeSelect: true
+    });
+    expect(getInputString()).to.equal("February 28, 2018 9:00 AM");
+
+    ReactDOM.findDOMNode(datePicker.input).focus();
+
+    setManually("February 28, 2018 9:20 AM");
+    expect(getInputString()).to.equal("February 28, 2018 9:20 AM");
+  });
+
+  it("should handle 53 min time intervals", () => {
+    renderDatePicker("February 28, 2018 9:00 AM", {
+      timeIntervals: 53,
+      showTimeSelect: true
+    });
+    expect(getInputString()).to.equal("February 28, 2018 9:00 AM");
+
+    ReactDOM.findDOMNode(datePicker.input).focus();
+
+    setManually("February 28, 2018 9:53 AM");
+    expect(getInputString()).to.equal("February 28, 2018 9:53 AM");
+  });
+
   function setManually(string) {
     TestUtils.Simulate.focus(datePicker.input);
     TestUtils.Simulate.change(datePicker.input, { target: { value: string } });
@@ -96,18 +122,19 @@ describe("TimePicker", () => {
     return ReactDOM.findDOMNode(datePicker.input).value;
   }
 
-  function renderDatePicker(string) {
-    return renderDatePickerFor(new Date(string));
+  function renderDatePicker(string, props) {
+    return renderDatePickerFor(new Date(string), props);
   }
 
-  function renderDatePickerFor(selected) {
+  function renderDatePickerFor(selected, props) {
     datePicker = ReactDOM.render(
       <DatePicker
         selected={selected}
         dateFormat={"MMMM d, yyyy p"}
         allowSameDay
         onChange={onChange}
         showTimeSelect
+        {...props}
       />,
       div
     );