From 9ed00a86fc31854e0b1d653fd4e7cc6dbd71013c Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 26 Aug 2019 19:42:20 +0100
Subject: [PATCH 1/3] Fix: changing month or day in post publish date closes
 the popover.

---
 packages/components/src/date-time/date.js | 33 +++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js
index 0d5058789f17f..d01f9fecfcd75 100644
--- a/packages/components/src/date-time/date.js
+++ b/packages/components/src/date-time/date.js
@@ -7,7 +7,7 @@ import { DayPickerSingleDateController } from 'react-dates';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 
 /**
  * Module Constants
@@ -20,6 +20,30 @@ class DatePicker extends Component {
 		super( ...arguments );
 
 		this.onChangeMoment = this.onChangeMoment.bind( this );
+		this.nodeRef = createRef();
+		this.keepFocusInside = this.keepFocusInside.bind( this );
+	}
+
+	/*
+	* Todo: We should remove this function ASAP.
+	* It is kept because there is focus loose when we click the previous and next month buttons on react dates.
+	* This focus lose then makes the date picker popover close.
+	* Ideally we should add an upstream commit on react-dates to fix this issue.
+	*/
+	keepFocusInside() {
+		if ( ! this.nodeRef.current ) {
+			return;
+		}
+		// If focus was lost.
+		if ( ! document.activeElement || ! this.nodeRef.current.contains( document.activeElement ) ) {
+			// Retrieve the focus region div.
+			const focusRegion = this.nodeRef.current.querySelector( '.DayPicker_focusRegion' );
+			if ( ! focusRegion ) {
+				return;
+			}
+			// Keep the focus on focus region.
+			focusRegion.focus();
+		}
 	}
 
 	onChangeMoment( newDate ) {
@@ -56,7 +80,10 @@ class DatePicker extends Component {
 		const momentDate = this.getMomentDate( currentDate );
 
 		return (
-			<div className="components-datetime__date">
+			<div
+				className="components-datetime__date"
+				ref={ this.nodeRef }
+			>
 				<DayPickerSingleDateController
 					date={ momentDate }
 					daySize={ 30 }
@@ -74,6 +101,8 @@ class DatePicker extends Component {
 					isOutsideRange={ ( date ) => {
 						return isInvalidDate && isInvalidDate( date.toDate() );
 					} }
+					onPrevMonthClick={ this.keepFocusInside }
+					onNextMonthClick={ this.keepFocusInside }
 				/>
 			</div>
 		);

From 8477e50a24d6c67f883533fb32817cea4fbbdd34 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 27 Aug 2019 18:04:24 +0100
Subject: [PATCH 2/3] Update packages/components/src/date-time/date.js

Co-Authored-By: Enrique Piqueras <epiqueras@users.noreply.github.com>
---
 packages/components/src/date-time/date.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js
index d01f9fecfcd75..d1584a441ba9f 100644
--- a/packages/components/src/date-time/date.js
+++ b/packages/components/src/date-time/date.js
@@ -26,7 +26,7 @@ class DatePicker extends Component {
 
 	/*
 	* Todo: We should remove this function ASAP.
-	* It is kept because there is focus loose when we click the previous and next month buttons on react dates.
+	* It is kept because focus is lost when we click on the previous and next month buttons.
 	* This focus lose then makes the date picker popover close.
 	* Ideally we should add an upstream commit on react-dates to fix this issue.
 	*/

From ea87504b9fc663a7d35eae867698d687fa7847c7 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 27 Aug 2019 18:04:33 +0100
Subject: [PATCH 3/3] Update packages/components/src/date-time/date.js

Co-Authored-By: Enrique Piqueras <epiqueras@users.noreply.github.com>
---
 packages/components/src/date-time/date.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js
index d1584a441ba9f..7361494a61e68 100644
--- a/packages/components/src/date-time/date.js
+++ b/packages/components/src/date-time/date.js
@@ -27,7 +27,7 @@ class DatePicker extends Component {
 	/*
 	* Todo: We should remove this function ASAP.
 	* It is kept because focus is lost when we click on the previous and next month buttons.
-	* This focus lose then makes the date picker popover close.
+	* This focus loss closes the date picker popover.
 	* Ideally we should add an upstream commit on react-dates to fix this issue.
 	*/
 	keepFocusInside() {