From 9e5989a75cf9547d499b6a027a850fd35ce68042 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul.dambra@gmail.com>
Date: Wed, 16 Feb 2022 20:00:55 +0000
Subject: [PATCH] actively set state to set the input value

---
 .../components/PropertyFilterDatePicker.tsx   | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx
index 86b2ae6953d1b..49052bcdf9fc0 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx
@@ -41,7 +41,7 @@ export function PropertyFilterDatePicker({
     const valueIsYYYYMMDD = narrowToString(value) && value?.length === 10
 
     const [datePickerOpen, setDatePickerOpen] = useState(operator && isOperatorDate(operator) && autoFocus)
-    const [datePickerStartingValue] = useState(dayJSMightParse(value) ? dayjs(value) : undefined)
+    const [datePickerValue, setDatePickerValue] = useState(dayJSMightParse(value) ? dayjs(value) : undefined)
     const [includeTimeInFilter, setIncludeTimeInFilter] = useState(!!value && !valueIsYYYYMMDD)
     const [dateFormat, setDateFormat] = useState(valueIsYYYYMMDD ? onlyDateFormat : dateAndTimeFormat)
 
@@ -49,6 +49,16 @@ export function PropertyFilterDatePicker({
         setDateFormat(includeTimeInFilter ? dateAndTimeFormat : onlyDateFormat)
     }, [includeTimeInFilter])
 
+    const onQuickChoice = (selectedRelativeRange: unknown): void => {
+        const matchedMapping = dateMapping[String(selectedRelativeRange)]
+        const formattedForDateFilter =
+            matchedMapping?.getFormattedDate && matchedMapping?.getFormattedDate(now(), dateFormat)
+        // returns `${earliest date} - ${latest date}
+        const fromDate = formattedForDateFilter?.split(' - ')[0]
+        setDatePickerValue(dayjs(fromDate))
+        setValue(fromDate)
+    }
+
     return (
         <DatePicker
             style={style}
@@ -61,10 +71,11 @@ export function PropertyFilterDatePicker({
             showTime={includeTimeInFilter}
             showNow={false}
             showToday={false}
-            defaultValue={datePickerStartingValue}
+            value={datePickerValue}
             onFocus={() => setDatePickerOpen(true)}
             onBlur={() => setDatePickerOpen(false)}
             onOk={(selectedDate) => {
+                setDatePickerValue(selectedDate)
                 setValue(selectedDate.format(dateFormat))
                 setDatePickerOpen(false)
             }}
@@ -75,6 +86,7 @@ export function PropertyFilterDatePicker({
                 if (includeTimeInFilter) {
                     return // we wait for a click on OK
                 }
+                setDatePickerValue(selectedDate)
                 setValue(selectedDate.format(dateFormat))
                 setDatePickerOpen(false)
             }}
@@ -95,12 +107,7 @@ export function PropertyFilterDatePicker({
                     <Select
                         bordered={true}
                         style={{ width: '100%', paddingBottom: '1rem' }}
-                        onSelect={(selectedRelativeRange) => {
-                            const matchedMapping = dateMapping[String(selectedRelativeRange)]
-                            const formattedForDateFilter =
-                                matchedMapping?.getFormattedDate && matchedMapping?.getFormattedDate(now(), dateFormat)
-                            setValue(formattedForDateFilter?.split(' - ')[0])
-                        }}
+                        onSelect={onQuickChoice}
                         placeholder={'e.g. 7 days ago'}
                     >
                         {[