Merge pull request #859 from ensdomains/fet-1637-mobile-date-registra…

…tion-bug-minimum-non-enforced limit <Calendar/> onChange to min date
ensdomains · Sep 5, 2024 · 3e02739 · 3e02739
2 parents 52f8eff + 2e54acc
commit 3e02739
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/src/components/@atoms/Calendar/Calendar.tsx b/src/components/@atoms/Calendar/Calendar.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react'
+import { ForwardedRef, forwardRef, InputHTMLAttributes, useState } from 'react'
 import styled, { css } from 'styled-components'
 
 import CalendarSVG from '@app/assets/Calendar.svg'
@@ -77,6 +77,8 @@ export const Calendar = forwardRef(
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
     const inputRef = useDefaultRef<HTMLInputElement>(ref)
+    const [minDuratiion] = useState(min ?? value)
+    const minDate = secondsToDate(minDuratiion)
 
     return (
       <Label htmlFor="calendar" $highlighted={highlighted}>
@@ -87,21 +89,27 @@ export const Calendar = forwardRef(
           {...props}
           ref={inputRef}
           value={secondsToDateInput(value)}
-          min={secondsToDateInput(min ?? value)}
+          min={secondsToDateInput(minDuratiion)}
           onFocus={(e) => {
             e.target.select()
           }}
           onChange={(e) => {
             if (!onChange) return
 
-            let { valueAsDate: newValueAsDate } = e.currentTarget
-            if (newValueAsDate) {
-              // Have to add in the timezone offset to make sure that the date shows up correctly after calendar picking for UTC
-              newValueAsDate = new Date(
-                newValueAsDate.getTime() + newValueAsDate.getTimezoneOffset() * 60 * 1000,
-              )
-            }
-            onChange({ ...e, currentTarget: { ...e.currentTarget, valueAsDate: newValueAsDate } })
+            const { valueAsDate: newValueAsDate } = e.currentTarget
+            if (!newValueAsDate) return
+
+            // Have to add in the timezone offset to make sure that the date shows up correctly after calendar picking for UTC
+            const normalizedValueAsDate = new Date(
+              newValueAsDate.getTime() + newValueAsDate.getTimezoneOffset() * 60 * 1000,
+            )
+
+            const limitedValueAsDate =
+              minDate > normalizedValueAsDate ? minDate : normalizedValueAsDate
+            onChange({
+              ...e,
+              currentTarget: { ...e.currentTarget, valueAsDate: limitedValueAsDate },
+            })
           }}
           onClick={() => inputRef.current!.showPicker()}
         />