Merge pull request #318 from onesine/315-close-behaviour

315 close behaviour

Author: onesine

package.json

@@ -13,6 +13,7 @@
         "lint": "eslint .",
         "lint:fix": "eslint --fix .",
         "pret:fix": "prettier --write .",
+        "format": "npm run pret:fix && npm run lint:fix",
         "build": "npm run lint && npm run clean && rollup -c rollup.config.js --bundleConfigAsCjs",
         "pub": "npm run build && np --no-tests",
         "dev": "next dev -p 8888",

src/components/Datepicker.tsx

@@ -268,6 +268,24 @@ const Datepicker = (props: DatepickerType) => {
         }
     }, [asSingle, startFrom, value]);
 
+    useEffect(() => {
+        const handleEscapeKey = (event: KeyboardEvent) => {
+            const container = calendarContainerRef.current;
+
+            if (!container || !container.classList.contains("block") || event.key !== "Escape") {
+                return;
+            }
+
+            hideDatepicker();
+        };
+
+        document.addEventListener("keydown", handleEscapeKey);
+
+        return () => {
+            document.removeEventListener("keydown", handleEscapeKey);
+        };
+    }, [hideDatepicker]);
+
     // Variables
     const safePrimaryColor = useMemo(() => {
         if (COLORS.includes(primaryColor)) {

src/components/Input.tsx

@@ -172,38 +172,37 @@ const Input = () => {
     useEffect(() => {
         const button = buttonRef?.current;
 
+        if (!button) return;
+
         function focusInput(e: Event) {
             e.stopPropagation();
             const input = inputRef.current;
 
-            if (input) {
-                input.focus();
-                if (inputText) {
-                    changeInputText("");
-                    if (dayHover) {
-                        changeDayHover(null);
-                    }
-                    if (period.start && period.end) {
-                        changeDatepickerValue(
-                            {
-                                startDate: null,
-                                endDate: null
-                            },
-                            input
-                        );
-                    }
-                }
+            if (!input) return;
+
+            input.focus();
+
+            if (!inputText) return;
+
+            changeInputText("");
+            if (dayHover) {
+                changeDayHover(null);
+            }
+            if (period.start && period.end) {
+                changeDatepickerValue(
+                    {
+                        startDate: null,
+                        endDate: null
+                    },
+                    input
+                );
             }
         }
 
-        if (button) {
-            button.addEventListener("click", focusInput);
-        }
+        button.addEventListener("click", focusInput);
 
         return () => {
-            if (button) {
-                button.removeEventListener("click", focusInput);
-            }
+            button.removeEventListener("click", focusInput);
         };
     }, [
         changeDatepickerValue,