From 5192c699dc2b4ff91d39d715ad3acf5202136f35 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Mon, 5 Mar 2018 16:26:06 -0500
Subject: [PATCH 1/5] Chrome: Refactor PostTitle for easier select, deselect

---
 editor/components/post-title/index.js   | 74 ++++++-------------------
 editor/components/post-title/style.scss | 38 ++++---------
 2 files changed, 29 insertions(+), 83 deletions(-)

diff --git a/editor/components/post-title/index.js b/editor/components/post-title/index.js
index aad6417c3f2158..31e1362f7d44ae 100644
--- a/editor/components/post-title/index.js
+++ b/editor/components/post-title/index.js
@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { Component, compose } from '@wordpress/element';
 import { keycodes } from '@wordpress/utils';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-import { withContext } from '@wordpress/components';
+import { withContext, withFocusOutside } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -32,47 +32,18 @@ class PostTitle extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.bindContainer = this.bindNode.bind( this, 'container' );
-		this.bindTextarea = this.bindNode.bind( this, 'textarea' );
 		this.onChange = this.onChange.bind( this );
 		this.onSelect = this.onSelect.bind( this );
 		this.onUnselect = this.onUnselect.bind( this );
-		this.onSelectionChange = this.onSelectionChange.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
-		this.blurIfOutside = this.blurIfOutside.bind( this );
-
-		this.nodes = {};
 
 		this.state = {
 			isSelected: false,
 		};
 	}
 
-	componentDidMount() {
-		document.addEventListener( 'selectionchange', this.onSelectionChange );
-	}
-
-	componentWillUnmount() {
-		document.removeEventListener( 'selectionchange', this.onSelectionChange );
-	}
-
-	bindNode( name, node ) {
-		this.nodes[ name ] = node;
-	}
-
-	onSelectionChange() {
-		const textarea = this.nodes.textarea.textarea;
-		if (
-			document.activeElement === textarea &&
-			textarea.selectionStart !== textarea.selectionEnd
-		) {
-			this.onSelect();
-		}
-	}
-
-	onChange( event ) {
-		const newTitle = event.target.value.replace( REGEXP_NEWLINES, ' ' );
-		this.props.onUpdate( newTitle );
+	handleFocusOutside() {
+		this.onUnselect();
 	}
 
 	onSelect() {
@@ -84,10 +55,9 @@ class PostTitle extends Component {
 		this.setState( { isSelected: false } );
 	}
 
-	blurIfOutside( event ) {
-		if ( ! this.nodes.container.contains( event.relatedTarget ) ) {
-			this.onUnselect();
-		}
+	onChange( event ) {
+		const newTitle = event.target.value.replace( REGEXP_NEWLINES, ' ' );
+		this.props.onUpdate( newTitle );
 	}
 
 	onKeyDown( event ) {
@@ -103,26 +73,17 @@ class PostTitle extends Component {
 		const className = classnames( 'editor-post-title', { 'is-selected': isSelected } );
 
 		return (
-			<div
-				ref={ this.bindContainer }
-				onFocus={ this.onSelect }
-				onBlur={ this.blurIfOutside }
-				className={ className }
-				tabIndex={ -1 /* Necessary for Firefox to include relatedTarget in blur event */ }
-			>
+			<div className={ className }>
 				{ isSelected && <PostPermalink /> }
-				<div>
-					<Textarea
-						ref={ this.bindTextarea }
-						className="editor-post-title__input"
-						value={ title }
-						onChange={ this.onChange }
-						placeholder={ placeholder || __( 'Add title' ) }
-						onClick={ this.onSelect }
-						onKeyDown={ this.onKeyDown }
-						onKeyPress={ this.onUnselect }
-					/>
-				</div>
+				<Textarea
+					className="editor-post-title__input"
+					value={ title }
+					onChange={ this.onChange }
+					placeholder={ placeholder || __( 'Add title' ) }
+					onFocus={ this.onSelect }
+					onKeyDown={ this.onKeyDown }
+					onKeyPress={ this.onUnselect }
+				/>
 			</div>
 		);
 	}
@@ -151,5 +112,6 @@ const applyEditorSettings = withContext( 'editor' )(
 
 export default compose(
 	applyConnect,
-	applyEditorSettings
+	applyEditorSettings,
+	withFocusOutside
 )( PostTitle );
diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss
index edbfa15ff20b0c..347ea4f9933fb5 100644
--- a/editor/components/post-title/style.scss
+++ b/editor/components/post-title/style.scss
@@ -1,45 +1,29 @@
 .editor-post-title {
 	position: relative;
 	padding: 5px 0;
-
-	div {
-		border: 1px solid transparent;
-		font-size: $editor-font-size;
-		transition: 0.2s outline;
-		margin-top: 0;
-		margin-bottom: 0;
-		padding: $block-padding;
-	}
-
-	&:hover div {
-		border: 1px solid $light-gray-500;
-		transition: 0.2s outline;
-	}
-
-	&.is-selected div {
-		border: 1px solid $light-gray-500;
-		transition: 0.2s outline;
-	}
 }
 
 .editor-post-title textarea.editor-post-title__input {
 	display: block;
+	width: 100%;
+	padding: #{ $block-padding + 5px } $block-padding;
+	margin: 0;
+	outline: none;
+	box-shadow: none;
+	border: 1px solid transparent;
+	border-radius: 0;
+	transition: 0.2s outline;
 	font-size: 2em;
 	font-family: $editor-font;
 	line-height: $default-line-height;
-	outline: none;
-	border: none;
-	box-shadow: none;
-	width: 100%;
-	padding: 5px 0;
-	margin: 0;
 
 	// inherited from h1
 	font-weight: 600;
 
+	&:hover,
 	&:focus {
-		outline: none;
-		box-shadow: none;
+		border: 1px solid $light-gray-500;
+		transition: 0.2s outline;
 	}
 }
 

From 394c6edb0c41f671aab6fd0610abc240e6eae561 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Mon, 5 Mar 2018 16:50:13 -0500
Subject: [PATCH 2/5] Title: Bind selected styles to is-selected parent
 modifier

Nature of withFocusOutside is that there'll be a short delay between focus being lost from textarea and handleFocusOutside being called, causing the permalink display and title selected effects from dismissing out of sync. While we _can_ style based on textarea focus, we'd rather ensure sync. Ideally, there'd not be a delay from `withFocusOutside`.

Also, we spend a fair bit of effort overriding styles from main.scss which shouldn't be applied to the title in the first place. Why do we assume there's a textarea element? This is abstracted into `Textarea` component, but we have no guarantee that's the tag rendered.
---
 edit-post/assets/stylesheets/main.scss  | 17 ++++++++-----
 editor/components/post-title/style.scss | 34 +++++++++++--------------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss
index c0de041239d909..3d840ba7b1a0ce 100644
--- a/edit-post/assets/stylesheets/main.scss
+++ b/edit-post/assets/stylesheets/main.scss
@@ -127,12 +127,6 @@ body.gutenberg-editor-page {
 .editor-block-list__block {
 	input,
 	textarea {
-		border-radius: 4px;
-		border-color: $light-gray-500;
-		font-family: $default-font;
-		font-size: $default-font-size;
-		padding: 6px 10px;
-
 		&::-webkit-input-placeholder {
 			color: $dark-gray-300;
 		}
@@ -147,3 +141,14 @@ body.gutenberg-editor-page {
 		}
 	}
 }
+
+.editor-block-list__block {
+	input,
+	textarea {
+		border-radius: 4px;
+		border-color: $light-gray-500;
+		font-family: $default-font;
+		font-size: $default-font-size;
+		padding: 6px 10px;
+	}
+}
diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss
index 347ea4f9933fb5..3604aa01bb812d 100644
--- a/editor/components/post-title/style.scss
+++ b/editor/components/post-title/style.scss
@@ -1,29 +1,25 @@
 .editor-post-title {
 	position: relative;
 	padding: 5px 0;
-}
 
-.editor-post-title textarea.editor-post-title__input {
-	display: block;
-	width: 100%;
-	padding: #{ $block-padding + 5px } $block-padding;
-	margin: 0;
-	outline: none;
-	box-shadow: none;
-	border: 1px solid transparent;
-	border-radius: 0;
-	transition: 0.2s outline;
-	font-size: 2em;
-	font-family: $editor-font;
-	line-height: $default-line-height;
+	.editor-post-title__input {
+		display: block;
+		width: 100%;
+		padding: #{ $block-padding + 5px } $block-padding;
+		margin: 0;
+		box-shadow: none;
+		border: 1px solid transparent;
+		font-size: 2em;
+		font-family: $editor-font;
+		line-height: $default-line-height;
 
-	// inherited from h1
-	font-weight: 600;
+		// inherited from h1
+		font-weight: 600;
+	}
 
-	&:hover,
-	&:focus {
+	&.is-selected .editor-post-title__input,
+	.editor-post-title__input:focus {
 		border: 1px solid $light-gray-500;
-		transition: 0.2s outline;
 	}
 }
 

From f96cddc76dd3fd4eeb343ec91ee951e1f75bb908 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 6 Mar 2018 15:31:44 -0500
Subject: [PATCH 3/5] Components: Add button focus normalization to
 withFocusOutside

---
 .../higher-order/with-focus-outside/index.js  | 72 +++++++++++++++++++
 .../with-focus-outside/test/index.js          | 19 ++++-
 2 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/components/higher-order/with-focus-outside/index.js b/components/higher-order/with-focus-outside/index.js
index 79dd61eef19157..d531fd804dacc1 100644
--- a/components/higher-order/with-focus-outside/index.js
+++ b/components/higher-order/with-focus-outside/index.js
@@ -1,8 +1,46 @@
+/**
+ * External dependencies
+ */
+import { includes } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
 
+/**
+ * Input types which are classified as button types, for use in considering
+ * whether element is a (focus-normalized) button.
+ *
+ * @type {string[]}
+ */
+const INPUT_BUTTON_TYPES = [
+	'button',
+	'submit',
+];
+
+/**
+ * Returns true if the given element is a button element subject to focus
+ * normalization, or false otherwise.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+ *
+ * @param {Element} element Element to test.
+ *
+ * @return {boolean} Whether element is a button.
+ */
+function isFocusNormalizedButton( element ) {
+	switch ( element.nodeName ) {
+		case 'BUTTON':
+			return true;
+
+		case 'INPUT':
+			return includes( INPUT_BUTTON_TYPES, element.type );
+	}
+
+	return false;
+}
+
 function withFocusOutside( WrappedComponent ) {
 	return class extends Component {
 		constructor() {
@@ -11,6 +49,7 @@ function withFocusOutside( WrappedComponent ) {
 			this.bindNode = this.bindNode.bind( this );
 			this.cancelBlurCheck = this.cancelBlurCheck.bind( this );
 			this.queueBlurCheck = this.queueBlurCheck.bind( this );
+			this.normalizeButtonFocus = this.normalizeButtonFocus.bind( this );
 		}
 
 		componentWillUnmount() {
@@ -31,6 +70,11 @@ function withFocusOutside( WrappedComponent ) {
 			// due to recycling behavior, except when explicitly persisted.
 			event.persist();
 
+			// Skip blur check if clicking button. See `normalizeButtonFocus`.
+			if ( this.preventBlurCheck ) {
+				return;
+			}
+
 			this.blurCheckTimeout = setTimeout( () => {
 				if ( 'function' === typeof this.node.handleFocusOutside ) {
 					this.node.handleFocusOutside( event );
@@ -42,10 +86,37 @@ function withFocusOutside( WrappedComponent ) {
 			clearTimeout( this.blurCheckTimeout );
 		}
 
+		/**
+		 * Handles a mousedown or mouseup event to respectively assign and
+		 * unassign a flag for preventing blur check on button elements. Some
+		 * browsers, namely Firefox and Safari, do not emit a focus event on
+		 * button elements when clicked, while others do. The logic here
+		 * intends to normalize this as treating click on buttons as focus.
+		 *
+		 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+		 *
+		 * @param {MouseEvent} event Event for mousedown or mouseup.
+		 */
+		normalizeButtonFocus( event ) {
+			const { type, target } = event;
+
+			if ( type === 'mouseup' ) {
+				this.preventBlurCheck = false;
+			} else if ( isFocusNormalizedButton( target ) ) {
+				this.preventBlurCheck = true;
+			}
+		}
+
 		render() {
+			// Disable reason: See `normalizeButtonFocus` for browser-specific
+			// focus event normalization.
+
+			/* eslint-disable jsx-a11y/no-static-element-interactions */
 			return (
 				<div
 					onFocus={ this.cancelBlurCheck }
+					onMouseDown={ this.normalizeButtonFocus }
+					onMouseUp={ this.normalizeButtonFocus }
 					onBlur={ this.queueBlurCheck }
 				>
 					<WrappedComponent
@@ -53,6 +124,7 @@ function withFocusOutside( WrappedComponent ) {
 						{ ...this.props } />
 				</div>
 			);
+			/* eslint-enable jsx-a11y/no-static-element-interactions */
 		}
 	};
 }
diff --git a/components/higher-order/with-focus-outside/test/index.js b/components/higher-order/with-focus-outside/test/index.js
index 960ad4bf616f06..815e082b2390d0 100644
--- a/components/higher-order/with-focus-outside/test/index.js
+++ b/components/higher-order/with-focus-outside/test/index.js
@@ -26,7 +26,7 @@ describe( 'withFocusOutside', () => {
 				return (
 					<div>
 						<input />
-						<input />
+						<input type="button" />
 					</div>
 				);
 			}
@@ -46,6 +46,23 @@ describe( 'withFocusOutside', () => {
 		expect( callback ).not.toHaveBeenCalled();
 	} );
 
+	it( 'should not call handler if focus transitions via click to button', () => {
+		const callback = jest.fn();
+		const wrapper = mount( <EnhancedComponent onFocusOutside={ callback } /> );
+
+		wrapper.find( 'input' ).at( 0 ).simulate( 'focus' );
+		wrapper.find( 'input' ).at( 1 ).simulate( 'mousedown' );
+		wrapper.find( 'input' ).at( 0 ).simulate( 'blur' );
+		// In most browsers, the input at index 1 would receive a focus event
+		// at this point, but this is not guaranteed, which is the intention of
+		// the normalization behavior tested here.
+		wrapper.find( 'input' ).at( 1 ).simulate( 'mouseup' );
+
+		jest.runAllTimers();
+
+		expect( callback ).not.toHaveBeenCalled();
+	} );
+
 	it( 'should call handler if focus doesn\'t shift to element within component', () => {
 		const callback = jest.fn();
 		const wrapper = mount( <EnhancedComponent onFocusOutside={ callback } /> );

From ad54dc8d514745d6e07ade4e2092ae8b5a505d5c Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 7 Mar 2018 11:06:59 -0500
Subject: [PATCH 4/5] Components: Include anchor in withFocusOutside button
 normalization

Safari does not count clicks on anchors as focus
---
 components/higher-order/with-focus-outside/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/higher-order/with-focus-outside/index.js b/components/higher-order/with-focus-outside/index.js
index d531fd804dacc1..d108377bacd2a2 100644
--- a/components/higher-order/with-focus-outside/index.js
+++ b/components/higher-order/with-focus-outside/index.js
@@ -31,6 +31,7 @@ const INPUT_BUTTON_TYPES = [
  */
 function isFocusNormalizedButton( element ) {
 	switch ( element.nodeName ) {
+		case 'A':
 		case 'BUTTON':
 			return true;
 

From 7f7f8b3a3aef9bb88d4342c7f762b39e1620ca31 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 7 Mar 2018 11:18:41 -0500
Subject: [PATCH 5/5] Components: Include touch events in button focus
 normalization

See "Does tapping on a button give it the focus?" at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
---
 components/higher-order/with-focus-outside/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/higher-order/with-focus-outside/index.js b/components/higher-order/with-focus-outside/index.js
index d108377bacd2a2..f5686079bb595d 100644
--- a/components/higher-order/with-focus-outside/index.js
+++ b/components/higher-order/with-focus-outside/index.js
@@ -101,7 +101,9 @@ function withFocusOutside( WrappedComponent ) {
 		normalizeButtonFocus( event ) {
 			const { type, target } = event;
 
-			if ( type === 'mouseup' ) {
+			const isInteractionEnd = includes( [ 'mouseup', 'touchend' ], type );
+
+			if ( isInteractionEnd ) {
 				this.preventBlurCheck = false;
 			} else if ( isFocusNormalizedButton( target ) ) {
 				this.preventBlurCheck = true;
@@ -118,6 +120,8 @@ function withFocusOutside( WrappedComponent ) {
 					onFocus={ this.cancelBlurCheck }
 					onMouseDown={ this.normalizeButtonFocus }
 					onMouseUp={ this.normalizeButtonFocus }
+					onTouchStart={ this.normalizeButtonFocus }
+					onTouchEnd={ this.normalizeButtonFocus }
 					onBlur={ this.queueBlurCheck }
 				>
 					<WrappedComponent