From 8f02dcab7080fb365a7897e8eb6fb7926670e5a2 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Mon, 9 Oct 2017 20:30:09 -0400
Subject: [PATCH 1/3] Title: Unselect title by blur event

Title: Detect blur outside root container node

Components: Enable title wrapper as focusable

Firefox won't include relatedTarget on blur event for div unless focusable. Assign as negative tab index to avoid creating a tab stop.
---
 editor/post-title/index.js | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/editor/post-title/index.js b/editor/post-title/index.js
index bdbb042f47ba3..4c01f36bd5e68 100644
--- a/editor/post-title/index.js
+++ b/editor/post-title/index.js
@@ -3,7 +3,6 @@
  */
 import { connect } from 'react-redux';
 import Textarea from 'react-autosize-textarea';
-import clickOutside from 'react-click-outside';
 import classnames from 'classnames';
 
 /**
@@ -32,12 +31,16 @@ class PostTitle extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.bindTextarea = this.bindTextarea.bind( this );
+		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,
@@ -52,12 +55,12 @@ class PostTitle extends Component {
 		document.removeEventListener( 'selectionchange', this.onSelectionChange );
 	}
 
-	bindTextarea( ref ) {
-		this.textareaContainer = ref;
+	bindNode( name, node ) {
+		this.nodes[ name ] = node;
 	}
 
 	onSelectionChange() {
-		const textarea = this.textareaContainer.textarea;
+		const textarea = this.nodes.textarea.textarea;
 		if (
 			document.activeElement === textarea &&
 			textarea.selectionStart !== textarea.selectionEnd
@@ -80,8 +83,10 @@ class PostTitle extends Component {
 		this.setState( { isSelected: false } );
 	}
 
-	handleClickOutside() {
-		this.setState( { isSelected: false } );
+	blurIfOutside( event ) {
+		if ( ! this.nodes.container.contains( event.relatedTarget ) ) {
+			this.onUnselect();
+		}
 	}
 
 	onKeyDown( event ) {
@@ -97,7 +102,13 @@ class PostTitle extends Component {
 		const className = classnames( 'editor-post-title', { 'is-selected': isSelected } );
 
 		return (
-			<div className={ className }>
+			<div
+				ref={ this.bindContainer }
+				onFocus={ this.onSelect }
+				onBlur={ this.blurIfOutside }
+				className={ className }
+				tabIndex={ -1 /* Necessary for Firefox to include relatedTarget in blur event */ }
+			>
 				{ isSelected && <PostPermalink /> }
 				<h1>
 					<Textarea
@@ -106,7 +117,6 @@ class PostTitle extends Component {
 						value={ title }
 						onChange={ this.onChange }
 						placeholder={ __( 'Add title' ) }
-						onFocus={ this.onSelect }
 						onClick={ this.onSelect }
 						onKeyDown={ this.onKeyDown }
 						onKeyPress={ this.onUnselect }
@@ -130,4 +140,4 @@ export default connect(
 		},
 		clearSelectedBlock,
 	}
-)( clickOutside( PostTitle ) );
+)( PostTitle );

From 45864c7260aa151994faec64635f9f39db779b4b Mon Sep 17 00:00:00 2001
From: morgan <morgan.smith@ephox.com>
Date: Thu, 12 Oct 2017 16:24:44 +1000
Subject: [PATCH 2/3] Components: Refactor ClipboardButton to not lose focus

Components: Refactor ClipboardContainer to access sibling node

Components: Move ClipboardButton callbacks to function

Ensure that if props have changed since original mount, latest value is reflected at time of copy

Components: Render clipboard button with wrapping container

Components: Clear selection on clipboard button press

Clearing selection will move focus back to the triggering button,
ensuring that it is not reset to the body, and further that it is
kept within the rendered node.
---
 components/clipboard-button/index.js | 53 +++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/components/clipboard-button/index.js b/components/clipboard-button/index.js
index e52ef576afc4b..80a96920e5cbd 100644
--- a/components/clipboard-button/index.js
+++ b/components/clipboard-button/index.js
@@ -3,12 +3,11 @@
  */
 import Clipboard from 'clipboard';
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { findDOMNode, Component } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,12 +15,23 @@ import { findDOMNode, Component } from '@wordpress/element';
 import { Button } from '../';
 
 class ClipboardButton extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.bindContainer = this.bindContainer.bind( this );
+		this.onCopy = this.onCopy.bind( this );
+		this.getText = this.getText.bind( this );
+	}
+
 	componentDidMount() {
-		const { text, onCopy = noop } = this.props;
-		const button = findDOMNode( this.button );
-		this.clipboard = new Clipboard( button, {
-			text: () => text,
+		const { container, getText, onCopy } = this;
+		const button = container.firstChild;
+
+		this.clipboard = new Clipboard( button,	{
+			text: getText,
+			container,
 		} );
+
 		this.clipboard.on( 'success', onCopy );
 	}
 
@@ -30,17 +40,36 @@ class ClipboardButton extends Component {
 		delete this.clipboard;
 	}
 
+	bindContainer( container ) {
+		this.container = container;
+	}
+
+	onCopy( args ) {
+		// Clearing selection will move focus back to the triggering button,
+		// ensuring that it is not reset to the body, and further that it is
+		// kept within the rendered node.
+		args.clearSelection();
+
+		const { onCopy } = this.props;
+		if ( onCopy ) {
+			onCopy();
+		}
+	}
+
+	getText() {
+		return this.props.text;
+	}
+
 	render() {
 		const { className, children } = this.props;
 		const classes = classnames( 'components-clipboard-button', className );
 
 		return (
-			<Button
-				ref={ ref => this.button = ref }
-				className={ classes }
-			>
-				{ children }
-			</Button>
+			<div ref={ this.bindContainer }>
+				<Button className={ classes }>
+					{ children }
+				</Button>
+			</div>
 		);
 	}
 }

From 8ef869df6bbc8205c62edf435ffa47ac498e5f7a Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Fri, 13 Oct 2017 08:47:59 -0400
Subject: [PATCH 3/3] Permalink: Fix typo on unmount lifecycle method

Was logging error when unselecting title after clicking copy since timeout was never canceled
---
 editor/post-permalink/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/post-permalink/index.js b/editor/post-permalink/index.js
index 2f7fc86277e43..a53295c639969 100644
--- a/editor/post-permalink/index.js
+++ b/editor/post-permalink/index.js
@@ -25,7 +25,7 @@ class PostPermalink extends Component {
 		this.onCopy = this.onCopy.bind( this );
 	}
 
-	componentWillUnmout() {
+	componentWillUnmount() {
 		clearTimeout( this.dismissCopyConfirmation );
 	}