scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: SW-710 fixed enter key press issue

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2024-11-01 11:01:40 +01:00
parent 71c7f3c0a4
commit 3a8137bd3c
1 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/DatePicker/index.tsx
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import { da, de, fi, nb, sv } from "date-fns/locale" import { da, de, fi, nb, sv } from "date-fns/locale"
import { useEffect, useRef, useState } from "react" import { useCallback, useEffect, useRef, useState } from "react"
import { useFormContext, useWatch } from "react-hook-form" import { useFormContext, useWatch } from "react-hook-form"
import { Lang } from "@/constants/languages" import { Lang } from "@/constants/languages"
@@ -37,11 +37,14 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
setIsOpen(false) setIsOpen(false)
} }
function handleOnClick() { function showOnFocus() {
setIsOpen((prevIsOpen) => !prevIsOpen) setIsOpen(true)
} }
function handleSelectDate(selected: Date) { function handleSelectDate(selected: Date) {
// Handle Enter key press on any other input fields trigger day click update
// Daypicker triggers onDayClick for a previous date on enter
if (!dt(selected).isBefore(dt(), "day")) {
if (isSelectingFrom) { if (isSelectingFrom) {
setValue(name, { setValue(name, {
fromDate: dt(selected).format("YYYY-MM-DD"), fromDate: dt(selected).format("YYYY-MM-DD"),
@@ -65,10 +68,9 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
setIsSelectingFrom(true) setIsSelectingFrom(true)
} }
} }
}
useEffect(() => { const closeIfOutside = useCallback(
function handleClickOutside(evt: Event) { (target: HTMLElement) => {
const target = evt.target as HTMLElement
if (ref.current && target && !ref.current.contains(target)) { if (ref.current && target && !ref.current.contains(target)) {
if (!selectedDate.toDate) { if (!selectedDate.toDate) {
setValue(name, { setValue(name, {
@@ -77,15 +79,29 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
.add(1, "day") .add(1, "day")
.format("YYYY-MM-DD"), .format("YYYY-MM-DD"),
}) })
setIsSelectingFrom(true)
} }
setIsOpen(false) setIsOpen(false)
} }
},
[setIsOpen, setValue, setIsSelectingFrom, selectedDate, name]
)
function closeOnBlur(evt: FocusEvent) {
const target = evt.relatedTarget as HTMLElement
closeIfOutside(target)
}
useEffect(() => {
function handleClickOutside(evt: Event) {
const target = evt.target as HTMLElement
closeIfOutside(target)
} }
document.body.addEventListener("click", handleClickOutside) document.body.addEventListener("click", handleClickOutside)
return () => { return () => {
document.body.removeEventListener("click", handleClickOutside) document.body.removeEventListener("click", handleClickOutside)
} }
}, [setIsOpen, setValue, selectedDate, name]) }, [closeIfOutside])
const selectedFromDate = dt(selectedDate.fromDate) const selectedFromDate = dt(selectedDate.fromDate)
.locale(lang) .locale(lang)
@@ -95,8 +111,15 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
: "" : ""
return ( return (
<div className={styles.container} data-isopen={isOpen} ref={ref}> <div
<button className={styles.btn} onClick={handleOnClick} type="button"> className={styles.container}
onBlur={(e) => {
closeOnBlur(e.nativeEvent)
}}
data-isopen={isOpen}
ref={ref}
>
<button className={styles.btn} onFocus={showOnFocus} type="button">
<Body className={styles.body} asChild> <Body className={styles.body} asChild>
<span> <span>
{selectedFromDate} - {selectedToDate} {selectedFromDate} - {selectedToDate}