Hint visible when picking a date from calendar

3scale · Dec 5, 2024 · 587a618 · 587a618
1 parent 588b314
commit 587a618
Showing 1 changed file with 8 additions and 9 deletions.
diff --git a/app/javascript/src/AccessTokens/components/ExpirationDatePicker.tsx b/app/javascript/src/AccessTokens/components/ExpirationDatePicker.tsx
@@ -41,15 +41,6 @@ const ExpirationDatePicker: FunctionComponent<Props> = ({ id, label }) => {
     return new Date(new Date().getTime() + selectedItem.period * dayMs)
   }, [selectedItem])
 
-  const fieldHint = useMemo(() => {
-    if (!fieldDate) return
-
-    const date = new Date(fieldDate)
-    date.setHours(0, 0, 0, 0)
-
-    return `The token will expire on ${date.toLocaleDateString()}`
-  }, [fieldDate])
-
   const dateValue = useMemo(() => {
     let value = ''
 
@@ -62,6 +53,14 @@ const ExpirationDatePicker: FunctionComponent<Props> = ({ id, label }) => {
     return value
   }, [fieldDate, selectedItem, pickedDate])
 
+  const fieldHint = useMemo(() => {
+    if (!dateValue) return
+
+    const date = new Date(dateValue)
+
+    return `The token will expire on ${date.toLocaleDateString()}`
+  }, [dateValue])
+
   const handleOnChange = (_value: string, event: FormEvent<HTMLSelectElement>) => {
     const value = (event.target as HTMLSelectElement).value
     const selected = collection.find(i => i.id === value) ?? null