restore focus logic in timepicker

Hacker0x01 · Sep 12, 2023 · 3bdf133 · 3bdf133
1 parent 5d8d4ac
commit 3bdf133
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/time.jsx b/src/time.jsx
@@ -183,22 +183,29 @@ export default class Time extends React.Component {
       }
     }
 
+    // Determine which time to focus and scroll into view when component mounts
+    const timeToFocus = times.reduce((prev, time) => {
+      if (time.getTime() <= activeDate.getTime()) {
+        return time;
+      }
+      return prev;
+    }, times[0]);
+
     return times.map((time, i) => {
-      const isActiveTime = isSameMinute(time, activeDate);
       return (
         <li
           key={i}
           onClick={this.handleClick.bind(this, time)}
           className={this.liClasses(time)}
           ref={(li) => {
-            if (isActiveTime) {
+            if (time === timeToFocus) {
               this.centerLi = li;
             }
           }}
           onKeyDown={(ev) => {
             this.handleOnKeyDown(ev, time);
           }}
-          tabIndex={isActiveTime ? 0 : -1}
+          tabIndex={time === timeToFocus ? 0 : -1}
           role="option"
           aria-selected={this.isSelectedTime(time) ? "true" : undefined}
         >

diff --git a/test/time_format_test.test.js b/test/time_format_test.test.js
@@ -121,7 +121,7 @@ describe("TimeComponent", () => {
       var timeListItem = timeComponent.find(
         ".react-datepicker__time-list-item--selected",
       );
-      expect(timeListItem.at(0).prop("tabIndex")).toBe("0");
+      expect(timeListItem.at(0).prop("tabIndex")).toBe(0);
     });
 
     it("should not add the aria-selected property to a regular item", () => {
@@ -151,7 +151,7 @@ describe("TimeComponent", () => {
       var timeListItem = timeComponent.find(
         ".react-datepicker__time-list-item",
       );
-      expect(timeListItem.at(0).prop("tabIndex")).toBe("-1");
+      expect(timeListItem.at(0).prop("tabIndex")).toBe(-1);
     });
 
     it("when no selected time, should focus the time closest to the opened time", () => {
@@ -169,7 +169,7 @@ describe("TimeComponent", () => {
         timeListItem
           .findWhere((node) => node.type() && node.text() === "09:00")
           .prop("tabIndex"),
-      ).toBe("0");
+      ).toBe(0);
     });
 
     it("when no selected time, should call calcCenterPosition with centerLi ref, closest to the opened time", () => {

diff --git a/test/timepicker_test.test.js b/test/timepicker_test.test.js
@@ -57,10 +57,7 @@ describe("TimePicker", () => {
   });
 
   it("should show different colors for times", () => {
-    const handleTimeColors = (time, currH, currM) => {
-      if (!Number.isInteger(currH) || !Number.isInteger(currM)) {
-        return "wrong";
-      }
+    const handleTimeColors = (time) => {
       return time.getHours() < 12 ? "red" : "green";
     };
     const timePicker = TestUtils.renderIntoDocument(