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

79
components/DatePicker/index.tsx
View File

@@ -1,6 +1,6 @@
"use client"
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 { Lang } from "@/constants/languages"
@@ -37,38 +37,40 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
setIsOpen(false)
}
function handleOnClick() {
setIsOpen((prevIsOpen) => !prevIsOpen)
function showOnFocus() {
setIsOpen(true)
}
function handleSelectDate(selected: Date) {
if (isSelectingFrom) {
setValue(name, {
fromDate: dt(selected).format("YYYY-MM-DD"),
toDate: undefined,
})
setIsSelectingFrom(false)
} else if (!dt(selectedDate.fromDate).isSame(dt(selected))) {
const fromDate = dt(selectedDate.fromDate)
const toDate = dt(selected)
if (toDate.isAfter(fromDate)) {
// 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) {
setValue(name, {
fromDate: selectedDate.fromDate,
toDate: toDate.format("YYYY-MM-DD"),
})
} else {
setValue(name, {
fromDate: toDate.format("YYYY-MM-DD"),
toDate: selectedDate.fromDate,
fromDate: dt(selected).format("YYYY-MM-DD"),
toDate: undefined,
})
setIsSelectingFrom(false)
} else if (!dt(selectedDate.fromDate).isSame(dt(selected))) {
const fromDate = dt(selectedDate.fromDate)
const toDate = dt(selected)
if (toDate.isAfter(fromDate)) {
setValue(name, {
fromDate: selectedDate.fromDate,
toDate: toDate.format("YYYY-MM-DD"),
})
} else {
setValue(name, {
fromDate: toDate.format("YYYY-MM-DD"),
toDate: selectedDate.fromDate,
})
}
setIsSelectingFrom(true)
}
setIsSelectingFrom(true)
}
}
useEffect(() => {
function handleClickOutside(evt: Event) {
const target = evt.target as HTMLElement
const closeIfOutside = useCallback(
(target: HTMLElement) => {
if (ref.current && target && !ref.current.contains(target)) {
if (!selectedDate.toDate) {
setValue(name, {
@@ -77,15 +79,29 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
.add(1, "day")
.format("YYYY-MM-DD"),
})
setIsSelectingFrom(true)
}
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)
return () => {
document.body.removeEventListener("click", handleClickOutside)
}
}, [setIsOpen, setValue, selectedDate, name])
}, [closeIfOutside])
const selectedFromDate = dt(selectedDate.fromDate)
.locale(lang)
@@ -95,8 +111,15 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
: ""
return (
<div className={styles.container} data-isopen={isOpen} ref={ref}>
<button className={styles.btn} onClick={handleOnClick} type="button">
<div
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>
<span>
{selectedFromDate} - {selectedToDate}