Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Title: Unselect title by blur event #2948

Merged
merged 3 commits into from
Oct 20, 2017
Merged

Title: Unselect title by blur event #2948

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8f02dca
Title: Unselect title by blur event
aduth Oct 10, 2017
45864c7
Components: Refactor ClipboardButton to not lose focus
ephox-mogran Oct 12, 2017
8ef869d
Permalink: Fix typo on unmount lifecycle method
aduth Oct 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 41 additions & 12 deletions components/clipboard-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,35 @@
*/
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
*/
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 );
}

Expand All @@ -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>
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion editor/post-permalink/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class PostPermalink extends Component {
this.onCopy = this.onCopy.bind( this );
}

componentWillUnmout() {
componentWillUnmount() {
clearTimeout( this.dismissCopyConfirmation );
}

Expand Down
30 changes: 20 additions & 10 deletions editor/post-title/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand All @@ -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 ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this mean that the textarea blurring if filtered out? Why are you needing to stop propagation in the clipboard container? Is the relatedTarget not set?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It turns out it isn't. I thought relatedTarget was fragile. It may be that it is set in situations where something else has received a specific focus() call, and isn't set in situations where the focused element has been suddenly removed from the page and the body gets focus by default. In this situation, the active element seems to be body, but relatedTarget is nothing (when the textarea is removed).

this.onUnselect();
}
}

onKeyDown( event ) {
Expand All @@ -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
Expand All @@ -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 }
Expand All @@ -130,4 +140,4 @@ export default connect(
},
clearSelectedBlock,
}
)( clickOutside( PostTitle ) );
)( PostTitle );