✨ Feat: Enhance TimePicker with ref forwarding and next element focus handling

Introduces issue of not being able to focus backwards when SHIFT+TAB ing

Author: tyler-dane

packages/web/src/components/TimePicker/TimePicker.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import ReactSelect, { Props as RSProps } from "react-select";
+import React, { ForwardedRef, forwardRef, useRef, useState } from "react";
+import ReactSelect, { Props as RSProps, SelectInstance } from "react-select";
 import { Key } from "ts-key-enum";
 import { SelectOption } from "@web/common/types/component.types";
 import { Option_Time } from "@web/common/types/util.types";
@@ -8,20 +8,26 @@ import { StyledTimePicker, StyledDivider } from "./styled";
 
 export interface Props extends Omit<RSProps, "value"> {
   bgColor: string;
+  nextElementRef?: React.RefObject<HTMLTextAreaElement>;
   onChange: (option: SelectOption<string>) => void;
   options?: Option_Time[];
   selectClassName?: string;
   value: SelectOption<string>;
 }
 
-export const TimePicker: React.FC<Props> = ({
-  bgColor,
-  onChange: _onChange,
-  options,
-  selectClassName,
-  value,
-  ...props
-}) => {
+export const _TimePicker = (
+  {
+    bgColor,
+    nextElementRef,
+    onChange: _onChange,
+    options,
+    selectClassName,
+    value,
+    ...props
+  }: Props,
+  ref: ForwardedRef<ReactSelect>
+  // ref: Ref<SelectInstance>
+) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isMenuOpened, setIsMenuOpen] = useState(false);
 
@@ -32,13 +38,18 @@ export const TimePicker: React.FC<Props> = ({
     <StyledTimePicker bgColor={bgColor} isOpen={isMenuOpened}>
       <ReactSelect
         {...props}
+        ref={ref}
         className={selectClassName}
         classNamePrefix={TIMEPICKER}
         value={value}
         maxMenuHeight={4 * 41}
         noOptionsMessage={() => "Nothin'. Typo?"}
-        onBlur={() => setIsFocused(false)}
+        onBlur={() => {
+          console.log("blurred");
+          setIsFocused(false);
+        }}
         onFocus={() => {
+          console.log("focused");
           setIsFocused(true);
         }}
         onChange={_onChange}
@@ -71,8 +82,17 @@ export const TimePicker: React.FC<Props> = ({
           setIsMenuOpen(true);
         }}
         onMenuClose={() => {
+          console.log("closed menu");
+          setIsFocused(false);
           setIsMenuOpen(false);
           clearTimeout(scrollTimer);
+
+          if (nextElementRef && nextElementRef.current) {
+            console.log("focusing on next input...");
+            nextElementRef.current.focus();
+          } else {
+            console.log("doing nothing with refs");
+          }
         }}
         openMenuOnFocus={true}
         options={options}
@@ -82,3 +102,5 @@ export const TimePicker: React.FC<Props> = ({
     </StyledTimePicker>
   );
 };
+
+export const TimePicker = forwardRef(_TimePicker);

packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx

@@ -1,4 +1,4 @@
-import React, { FC, SetStateAction } from "react";
+import React, { FC, SetStateAction, useRef } from "react";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
@@ -24,6 +24,7 @@ export interface Props {
   event: Schema_Event;
   endTime: SelectOption<string>;
   inputColor?: string;
+  nextElementRef: React.RefObject<HTMLTextAreaElement>;
   isEndDatePickerOpen: boolean;
   isStartDatePickerOpen: boolean;
   selectedEndDate: Date;
@@ -43,6 +44,7 @@ export const DateTimeSection: FC<Props> = ({
   category,
   event,
   inputColor,
+  nextElementRef,
   isEndDatePickerOpen,
   isStartDatePickerOpen,
   selectedEndDate,
@@ -59,6 +61,8 @@ export const DateTimeSection: FC<Props> = ({
 }) => {
   const timeOptions = getTimeOptions();
 
+  const endTimeRef = useRef(null);
+
   const adjustComplimentTimeIfNeeded = (
     changed: "start" | "end",
     value: string
@@ -165,18 +169,21 @@ export const DateTimeSection: FC<Props> = ({
             bgColor={bgColor}
             value={startTime}
             inputId="startTimePicker"
+            nextElementRef={endTimeRef}
             onChange={onSelectStartTime}
-            openMenuOnFocus={true}
+            openMenuOnFocus
             options={timeOptions}
           />
           -
           <TimePicker
             bgColor={bgColor}
             value={endTime}
             inputId="endTimePicker"
+            nextElementRef={nextElementRef}
             onChange={onSelectEndTime}
             openMenuOnFocus
             options={timeOptions}
+            ref={endTimeRef}
           />
         </StyledTimeFlex>
       )}

packages/web/src/views/Forms/EventForm/EventForm.tsx

@@ -5,6 +5,7 @@ import React, {
   KeyboardEventHandler,
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import { Key } from "ts-key-enum";
@@ -67,6 +68,8 @@ export const EventForm: React.FC<FormProps> = ({
   const [selectedEndDate, setSelectedEndDate] = useState(new Date());
   const [selectedStartDate, setSelectedStartDate] = useState(new Date());
 
+  const descriptionRef = useRef<HTMLTextAreaElement>(null);
+
   /********
    * Effect
    *********/
@@ -299,6 +302,7 @@ export const EventForm: React.FC<FormProps> = ({
           category={category}
           endTime={endTime}
           inputColor={hoverColorByPriority[priority || Priorities.UNASSIGNED]}
+          nextElementRef={descriptionRef}
           isEndDatePickerOpen={isEndDatePickerOpen}
           isStartDatePickerOpen={isStartDatePickerOpen}
           selectedEndDate={selectedEndDate}
@@ -318,6 +322,7 @@ export const EventForm: React.FC<FormProps> = ({
           onChange={onChangeEventTextField("description")}
           onKeyDown={ignoreDelete}
           placeholder="Description"
+          ref={descriptionRef}
           value={event.description || ""}
         />