Browser Focus Out 버그 Fix, (Trigger 버튼 추가)

Author: flamecommit

package/src/assets/calendar.svg

@@ -49,6 +49,19 @@
   font-size: 0;
   cursor: pointer;
 }
+.react-datepicker__trigger {
+  margin-left: 0.4rem;
+  width: 18px;
+  height: 18px;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0zIDlIMjFNNyAzVjVNMTcgM1Y1TTYgMTNIOE02IDE3SDhNMTEgMTNIMTNNMTEgMTdIMTNNMTYgMTNIMThNMTYgMTdIMThNNi4yIDIxSDE3LjhDMTguOTIwMSAyMSAxOS40ODAyIDIxIDE5LjkwOCAyMC43ODJDMjAuMjg0MyAyMC41OTAzIDIwLjU5MDMgMjAuMjg0MyAyMC43ODIgMTkuOTA4QzIxIDE5LjQ4MDIgMjEgMTguOTIwMSAyMSAxNy44VjguMkMyMSA3LjA3OTg5IDIxIDYuNTE5ODQgMjAuNzgyIDYuMDkyMDJDMjAuNTkwMyA1LjcxNTY5IDIwLjI4NDMgNS40MDk3MyAxOS45MDggNS4yMTc5OUMxOS40ODAyIDUgMTguOTIwMSA1IDE3LjggNUg2LjJDNS4wNzk5IDUgNC41MTk4NCA1IDQuMDkyMDIgNS4yMTc5OUMzLjcxNTY5IDUuNDA5NzMgMy40MDk3MyA1LjcxNTY5IDMuMjE3OTkgNi4wOTIwMkMzIDYuNTE5ODQgMyA3LjA3OTg5IDMgOC4yVjE3LjhDMyAxOC45MjAxIDMgMTkuNDgwMiAzLjIxNzk5IDE5LjkwOEMzLjQwOTczIDIwLjI4NDMgMy43MTU2OSAyMC41OTAzIDQuMDkyMDIgMjAuNzgyQzQuNTE5ODQgMjEgNS4wNzk4OSAyMSA2LjIgMjFaIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4=');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+  border: none;
+  background-color: transparent;
+  font-size: 0;
+  cursor: pointer;
+}
 
 /* portal */
 .react-datepicker__portal {

package/src/assets/global.css

@@ -140,6 +140,19 @@ function Datepicker({
     setViewDate(formatDate(value || NEW_DATE, 'YYYY-MM-DD'));
   }, [value]);
 
+  // browser에서 focus가 사라졌을 때 picker close
+  const windowBlurHandler = () => {
+    setIsVisible(false);
+  };
+
+  useEffect(() => {
+    window.addEventListener('blur', windowBlurHandler);
+    // return window.removeEventListener('blur', windowBlurHandler);
+    return () => {
+      window.removeEventListener('blur', windowBlurHandler);
+    };
+  }, []);
+
   return (
     <div className={`${NAME_SPACE}__wrapper ${className}`}>
       <DatepickerInput

package/src/components/Datepicker.tsx

@@ -35,6 +35,11 @@ export default function DatepickerInput({
 }: IProps) {
   const formatArray = useMemo(() => splitString(valueFormat), [valueFormat]);
 
+  const triggerHandler = () => {
+    if (disabled) return;
+    setIsVisible(true);
+  };
+
   return (
     <div
       className={`${NAME_SPACE}__input-container`}
@@ -49,14 +54,20 @@ export default function DatepickerInput({
             setDateValue={setDateValue}
             timeValue={timeValue}
             setTimeValue={setTimeValue}
-            setIsVisible={setIsVisible}
             type={type}
             viewDate={viewDate}
             setViewDate={setViewDate}
             disabled={disabled}
           />
         );
       })}
+      <button
+        type="button"
+        className={`${NAME_SPACE}__trigger`}
+        onClick={triggerHandler}
+      >
+        Trigger
+      </button>
       {useClearButton && (
         <button
           type="button"

package/src/components/input/DatepickerInput.tsx

@@ -9,18 +9,16 @@ import {
   useState,
 } from 'react';
 import { NAME_SPACE, VALUE_TYPES } from '../../constants/core';
-import { IDateValue, ITimeValue, TIsVisible } from '../../types/props';
+import { IDateValue, ITimeValue } from '../../types/props';
 import { getDateValueUnit, getTimeValueUnit } from '../../utils/datetime';
 import { addLeadingZero, isNumeric } from '../../utils/string';
 
 interface IProps {
-  visibleType?: TIsVisible;
   type: string;
   dateValue: IDateValue;
   setDateValue: (value: IDateValue) => void;
   timeValue: ITimeValue;
   setTimeValue: (value: ITimeValue) => void;
-  setIsVisible: (value: TIsVisible) => void;
   viewDate: string;
   setViewDate: (value: string) => void;
   disabled: boolean;
@@ -57,13 +55,11 @@ function getNextSiblingsWithDataValueTrue(
 }
 
 function InputUnit({
-  visibleType = true,
   type,
   dateValue,
   setDateValue,
   timeValue,
   setTimeValue,
-  setIsVisible,
   viewDate,
   setViewDate,
   disabled,
@@ -237,7 +233,6 @@ function InputUnit({
 
   const focusHandler = (e: React.FocusEvent<HTMLDivElement>) => {
     if (disabled) return;
-    setIsVisible(visibleType);
     setTimeout(() => {
       selectText(e.target);
     }, 10);

package/src/components/input/InputUnit.tsx

@@ -49,6 +49,11 @@ export default function RangepickerInput({
 }: IProps) {
   const formatArray = useMemo(() => splitString(valueFormat), [valueFormat]);
 
+  const triggerHandler = (type: 'start' | 'end') => {
+    if (disabled) return;
+    setIsVisible(type);
+  };
+
   return (
     <div
       className={`${NAME_SPACE}__input-container`}
@@ -63,12 +68,10 @@ export default function RangepickerInput({
           return (
             <InputUnit
               key={i}
-              visibleType="start"
               dateValue={dateStartValue}
               setDateValue={setDateStartValue}
               timeValue={timeStartValue}
               setTimeValue={setTimeStartValue}
-              setIsVisible={setIsVisible}
               type={type}
               viewDate={viewStartDate}
               setViewDate={setViewStartDate}
@@ -77,6 +80,13 @@ export default function RangepickerInput({
           );
         })}
       </div>
+      <button
+        type="button"
+        className={`${NAME_SPACE}__trigger`}
+        onClick={() => triggerHandler('start')}
+      >
+        Trigger
+      </button>
       <div className={`${NAME_SPACE}__input-range-separator`}> ~ </div>
       <div
         className={`${NAME_SPACE}__input-range-container`}
@@ -86,12 +96,10 @@ export default function RangepickerInput({
           return (
             <InputUnit
               key={i}
-              visibleType="end"
               dateValue={dateEndValue}
               setDateValue={setDateEndValue}
               timeValue={timeEndValue}
               setTimeValue={setTimeEndValue}
-              setIsVisible={setIsVisible}
               type={type}
               viewDate={viewEndDate}
               setViewDate={setViewEndDate}
@@ -100,6 +108,13 @@ export default function RangepickerInput({
           );
         })}
       </div>
+      <button
+        type="button"
+        className={`${NAME_SPACE}__trigger`}
+        onClick={() => triggerHandler('end')}
+      >
+        Trigger
+      </button>
       {useClearButton && (
         <button
           type="button"