🐛 Fix: Prevent multiple clicks needed for selecting date

- Remove index files for DatePicker and Input components
- Update import paths for DatePicker and Input
- Modify Focusable component to use setIsFocused instead of toggleFocused
- Adjust DatePicker input to use StyledInput

Author: tyler-dane

packages/web/src/components/DatePicker/DatePicker.tsx

@@ -7,8 +7,8 @@ import { isDark } from "@core/util/color.utils";
 import { theme } from "@web/common/styles/theme";
 import { Flex } from "@web/components/Flex";
 import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
-import { Input } from "@web/components/Input";
 import { Text } from "@web/components/Text";
+import { StyledInput } from "../Input/styled";
 import {
   ChangeDayButtonsStyledFlex,
   MonthContainerStyled,
@@ -79,7 +79,7 @@ export const DatePicker: React.FC<Props> = ({
           view={view}
         />
       )}
-      customInput={<Input bgColor={inputColor} onBlurCapture={onInputBlur} />}
+      customInput={<StyledInput bgColor={inputColor} />}
       dateFormat={"M-d-yyyy"}
       formatWeekDay={(day) => day[0]}
       open={isOpen}

packages/web/src/components/DatePicker/index.ts

@@ -12,7 +12,7 @@ export type Props<T extends ClassNamedComponent> = T &
     underlineColor?: string;
   };
 
-const _Focusable = <T,>(
+const _Focusable = <T extends ClassNamedComponent>(
   {
     autoFocus = false,
     Component,
@@ -22,16 +22,18 @@ const _Focusable = <T,>(
   }: Props<T>,
   ref: Ref<HTMLDivElement>,
 ) => {
-  const [isFocused, toggleFocused] = useState(autoFocus);
+  const [isFocused, setIsFocused] = useState(false);
   const rest = props as unknown as T;
 
   return (
     <>
       <Component
         {...rest}
         ref={ref}
-        onFocus={() => toggleFocused(true)}
-        onBlur={() => toggleFocused(false)}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => {
+          setIsFocused(false);
+        }}
         autoFocus={autoFocus}
       />
       {!!withUnderline && isFocused && <Divider color={underlineColor} />}

packages/web/src/components/Focusable/Focusable.tsx

@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import weekPlugin from "dayjs/plugin/weekOfYear";
 import React, { FC, useEffect, useState } from "react";
 import { ID_DATEPICKER_SIDEBAR } from "@web/common/constants/web.constants";
-import { DatePicker } from "@web/components/DatePicker";
+import { DatePicker } from "@web/components/DatePicker/DatePicker";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { MonthPickerContainer } from "./../styled";
 

packages/web/src/components/Input/index.ts

@@ -7,7 +7,7 @@ import {
   dateIsValid,
   shouldAdjustComplimentDate,
 } from "@web/common/utils/web.date.util";
-import { DatePicker } from "@web/components/DatePicker";
+import { DatePicker } from "@web/components/DatePicker/DatePicker";
 import { AlignItems } from "@web/components/Flex/styled";
 import { StyledDateFlex } from "./styled";
 

packages/web/src/views/Calendar/components/Sidebar/MonthTab/MonthPicker/SidebarMonthPicker.tsx

@@ -3,7 +3,7 @@ import { ZIndex } from "@web/common/constants/web.constants";
 import { hoverColorByPriority } from "@web/common/styles/theme.util";
 import { PriorityButton } from "@web/components/Button/styled";
 import { Flex } from "@web/components/Flex";
-import { Input } from "@web/components/Input";
+import { Input } from "@web/components/Input/Input";
 import { Textarea } from "@web/components/Textarea";
 import { EVENT_WIDTH_MINIMUM } from "@web/views/Calendar/layout.constants";
 import { StyledFormProps } from "./types";