From e5a73b7cbc011eb213b7285d840b54300c04ca19 Mon Sep 17 00:00:00 2001
From: Allison Levine <allilevine@users.noreply.github.com>
Date: Mon, 15 Mar 2021 03:03:05 -0400
Subject: [PATCH] Keep post publishing popover open when a date is clicked
 (#29738)

* Keep focus on the post schedule popover
Add a keepOpen prop to the DateTimePicker and keep focus on the date
picker popover when true.

* Document keepOpen prop
---
 packages/components/src/date-time/README.md           | 7 +++++++
 packages/components/src/date-time/date.js             | 7 ++++++-
 packages/components/src/date-time/index.js            | 2 ++
 packages/editor/src/components/post-schedule/index.js | 1 +
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/date-time/README.md b/packages/components/src/date-time/README.md
index 6fcdea239fa71e..240f9d7cf2a65a 100644
--- a/packages/components/src/date-time/README.md
+++ b/packages/components/src/date-time/README.md
@@ -84,3 +84,10 @@ This function will be called on each day, every time user browses into a differe
 
 - Type: `Function`
 - Required: No
+
+### keepOpen
+
+Whether focus should stay on the `DateTimePicker` after clicking on a date in the calendar.
+
+- Type: `bool`
+- Required: No
diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js
index 6461cc00c9b902..05e11f89ce17b4 100644
--- a/packages/components/src/date-time/date.js
+++ b/packages/components/src/date-time/date.js
@@ -59,7 +59,7 @@ class DatePicker extends Component {
 	}
 
 	onChangeMoment( newDate ) {
-		const { currentDate, onChange } = this.props;
+		const { currentDate, onChange, keepOpen } = this.props;
 
 		// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
 		const momentDate = currentDate ? moment( currentDate ) : moment();
@@ -70,6 +70,11 @@ class DatePicker extends Component {
 		};
 
 		onChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );
+
+		// Keep focus on the date picker popover.
+		if ( keepOpen ) {
+			this.keepFocusInside();
+		}
 	}
 
 	/**
diff --git a/packages/components/src/date-time/index.js b/packages/components/src/date-time/index.js
index fecc9e302f29e1..53252b3a686915 100644
--- a/packages/components/src/date-time/index.js
+++ b/packages/components/src/date-time/index.js
@@ -28,6 +28,7 @@ function DateTimePicker(
 		onMonthPreviewed,
 		onChange,
 		events,
+		keepOpen,
 	},
 	ref
 ) {
@@ -54,6 +55,7 @@ function DateTimePicker(
 						isInvalidDate={ isInvalidDate }
 						onMonthPreviewed={ onMonthPreviewed }
 						events={ events }
+						keepOpen={ keepOpen }
 					/>
 				</>
 			) }
diff --git a/packages/editor/src/components/post-schedule/index.js b/packages/editor/src/components/post-schedule/index.js
index 06266f1bd68d9f..1e950fd41ba554 100644
--- a/packages/editor/src/components/post-schedule/index.js
+++ b/packages/editor/src/components/post-schedule/index.js
@@ -33,6 +33,7 @@ export function PostSchedule( { date, onUpdateDate } ) {
 			currentDate={ date }
 			onChange={ onChange }
 			is12Hour={ is12HourTime }
+			keepOpen={ true }
 		/>
 	);
 }