Fix bug that introduced a race condition in consumers (#2373)

* Fix bug that introduced a race condition in consumers
Shopify · Nov 18, 2019 · a0622b9 · a0622b9
1 parent 3aed7b7
commit a0622b9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -12,6 +12,9 @@
 - Prevented scrolling to `Popover` content in development ([#2403](https://github.com/Shopify/polaris-react/pull/2403))
 - Fixed an issue which caused HSL colors to not display in Edge ([#2418](https://github.com/Shopify/polaris-react/pull/2418))
 - Fixed an issue where the dropzone component jumped from an extra-large layout to a layout based on the width of its container ([#2412](https://github.com/Shopify/polaris-react/pull/2412))
+- Fixed an issue which caused HSL colors to not display in Edge ((#2418)[https://github.com/Shopify/polaris-react/pull/2418])
+- Fixed an issue where the dropzone component jumped from an extra-large layout to a layout based on the width of it's container ([#2412](https://github.com/Shopify/polaris-react/pull/2412))
+- Fixed a race condition in DatePicker ([#2373](https://github.com/Shopify/polaris-react/pull/2373))
 
 ### Documentation
 

diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -65,11 +65,18 @@ export function DatePicker({
   const i18n = useI18n();
   const [hoverDate, setHoverDate] = useState<Date | undefined>(undefined);
   const [focusDate, setFocusDate] = useState<Date | undefined>(undefined);
+  const [newRange, setNewRange] = useState<Range | undefined>(undefined);
 
   useEffect(() => {
     setFocusDate(undefined);
   }, [selected]);
 
+  useEffect(() => {
+    if (newRange) {
+      onChange(newRange);
+    }
+  }, [newRange, onChange]);
+
   const handleFocus = useCallback((date: Date) => {
     setFocusDate(date);
   }, []);
@@ -85,16 +92,13 @@ export function DatePicker({
     [onMonthChange],
   );
 
-  const handleDateSelection = useCallback(
-    (range: Range) => {
-      const {end} = range;
+  const handleDateSelection = useCallback((range: Range) => {
+    const {end} = range;
 
-      setHoverDate(end);
-      setFocusDate(new Date(end));
-      onChange(range);
-    },
-    [onChange],
-  );
+    setHoverDate(end);
+    setFocusDate(new Date(end));
+    setNewRange(range);
+  }, []);
 
   const handleMonthChangeClick = useCallback(
     (month: Months, year: Year) => {