From 7eeb77acc3e5b8ffff79f980a29229310f847149 Mon Sep 17 00:00:00 2001
From: louwie17 <lourensschep@gmail.com>
Date: Fri, 3 Dec 2021 09:29:27 -0400
Subject: [PATCH] Fix datepicker in advanced filter
 (https://github.com/woocommerce/woocommerce-admin/pull/7982)

* Make sure we set the onMonthPreviewed prop as this is required for wp.components.DatePicker

* Add changelogs
---
 plugins/woocommerce-admin/changelogs/fix-7507_fix_datepicker  | 4 ++++
 plugins/woocommerce-admin/packages/components/CHANGELOG.md    | 2 ++
 .../packages/components/src/calendar/date-picker.js           | 4 +++-
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 plugins/woocommerce-admin/changelogs/fix-7507_fix_datepicker

diff --git a/plugins/woocommerce-admin/changelogs/fix-7507_fix_datepicker b/plugins/woocommerce-admin/changelogs/fix-7507_fix_datepicker
new file mode 100644
index 00000000000..7c892fe8fda
--- /dev/null
+++ b/plugins/woocommerce-admin/changelogs/fix-7507_fix_datepicker
@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Fix usage of Wordpress DatePicker component. #7982
diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
index 9c7f62a629b..8ce46ba1b98 100644
--- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md
+++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Unreleased
 
+-   Fix usage of Wordpress DatePicker component in `DatePicker`. #7982
+
 # 8.1.1
 
 -   Fixed warnings when using AdvancedFilters component. #7704
diff --git a/plugins/woocommerce-admin/packages/components/src/calendar/date-picker.js b/plugins/woocommerce-admin/packages/components/src/calendar/date-picker.js
index 4a89eac3ad6..d43361f5a13 100644
--- a/plugins/woocommerce-admin/packages/components/src/calendar/date-picker.js
+++ b/plugins/woocommerce-admin/packages/components/src/calendar/date-picker.js
@@ -6,7 +6,7 @@ import 'core-js/features/array/from';
 import { __, sprintf } from '@wordpress/i18n';
 import { createElement, Component } from '@wordpress/element';
 import { Dropdown, DatePicker as WpDatePicker } from '@wordpress/components';
-import { partial } from 'lodash';
+import { partial, noop } from 'lodash';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import { dateValidationMessages, toMoment } from '@woocommerce/date';
@@ -127,6 +127,8 @@ class DatePicker extends Component {
 									this.onDateChange,
 									onToggle
 								) }
+								// onMonthPreviewed is required to prevent a React error from happening.
+								onMonthPreviewed={ noop }
 								isInvalidDate={ isInvalidDate }
 							/>
 						</div>