From commits-return-2396-archive-asf-public=cust-asf.ponee.io@superset.incubator.apache.org Fri Mar 15 17:56:31 2019 Return-Path: X-Original-To: archive-asf-public@cust-asf.ponee.io Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by mx-eu-01.ponee.io (Postfix) with SMTP id 94CDB180627 for ; Fri, 15 Mar 2019 18:56:30 +0100 (CET) Received: (qmail 33730 invoked by uid 500); 15 Mar 2019 17:56:29 -0000 Mailing-List: contact commits-help@superset.incubator.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@superset.incubator.apache.org Delivered-To: mailing list commits@superset.incubator.apache.org Received: (qmail 33711 invoked by uid 99); 15 Mar 2019 17:56:29 -0000 Received: from ec2-52-202-80-70.compute-1.amazonaws.com (HELO gitbox.apache.org) (52.202.80.70) by apache.org (qpsmtpd/0.29) with ESMTP; Fri, 15 Mar 2019 17:56:29 +0000 Received: by gitbox.apache.org (ASF Mail Server at gitbox.apache.org, from userid 33) id 0601F8531F; Fri, 15 Mar 2019 17:56:29 +0000 (UTC) Date: Fri, 15 Mar 2019 17:56:28 +0000 To: "commits@superset.apache.org" Subject: [incubator-superset] branch master updated: [fix] Cursor jumping when editing chart and dashboard titles (#7038) MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit Message-ID: <155267258861.5011.16306934431362356677@gitbox.apache.org> From: graceguo@apache.org X-Git-Host: gitbox.apache.org X-Git-Repo: incubator-superset X-Git-Refname: refs/heads/master X-Git-Reftype: branch X-Git-Oldrev: 07c340cf8203f13222f16efad1e55e202deb1865 X-Git-Newrev: fc1770f7b79a4d8815b646b46390fabf190c3815 X-Git-Rev: fc1770f7b79a4d8815b646b46390fabf190c3815 X-Git-NotificationType: ref_changed_plus_diff X-Git-Multimail-Version: 1.5.dev Auto-Submitted: auto-generated This is an automated email from the ASF dual-hosted git repository. graceguo pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-superset.git The following commit(s) were added to refs/heads/master by this push: new fc1770f [fix] Cursor jumping when editing chart and dashboard titles (#7038) fc1770f is described below commit fc1770f7b79a4d8815b646b46390fabf190c3815 Author: Grace Guo AuthorDate: Fri Mar 15 10:56:19 2019 -0700 [fix] Cursor jumping when editing chart and dashboard titles (#7038) --- superset/assets/src/components/EditableTitle.jsx | 30 ++++++++++-------------- 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/superset/assets/src/components/EditableTitle.jsx b/superset/assets/src/components/EditableTitle.jsx index 87a5160..428f995 100644 --- a/superset/assets/src/components/EditableTitle.jsx +++ b/superset/assets/src/components/EditableTitle.jsx @@ -55,7 +55,6 @@ export default class EditableTitle extends React.PureComponent { this.handleClick = this.handleClick.bind(this); this.handleBlur = this.handleBlur.bind(this); this.handleChange = this.handleChange.bind(this); - this.handleKeyUp = this.handleKeyUp.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); // Used so we can access the DOM element if a user clicks on this component. @@ -112,21 +111,16 @@ export default class EditableTitle extends React.PureComponent { } } - handleKeyUp(ev) { - // this entire method exists to support using EditableTitle as the title of a - // react-bootstrap Tab, as a workaround for this line in react-bootstrap https://goo.gl/ZVLmv4 - // - // tl;dr when a Tab EditableTitle is being edited, typically the Tab it's within has been - // clicked and is focused/active. for accessibility, when focused the Tab intercepts - // the ' ' key (among others, including all arrows) and onChange() doesn't fire. somehow - // keydown is still called so we can detect this and manually add a ' ' to the current title - if (ev.key === ' ') { - let title = ev.target.value; - const titleLength = (title || '').length; - if (title && title[titleLength - 1] !== ' ') { - title = `${title} `; - this.setState(() => ({ title })); - } + // this entire method exists to support using EditableTitle as the title of a + // react-bootstrap Tab, as a workaround for this line in react-bootstrap https://goo.gl/ZVLmv4 + // + // tl;dr when a Tab EditableTitle is being edited, typically the Tab it's within has been + // clicked and is focused/active. for accessibility, when focused the Tab intercepts + // the ' ' key (among others, including all arrows) and onChange() doesn't fire. somehow + // keydown is still called so we can detect this and manually add a ' ' to the current title + handleKeyDown(event) { + if (event.key === ' ') { + event.stopPropagation(); } } @@ -170,7 +164,7 @@ export default class EditableTitle extends React.PureComponent { required value={value} className={!title ? 'text-muted' : null} - onKeyUp={this.handleKeyUp} + onKeyDown={this.handleKeyDown} onChange={this.handleChange} onBlur={this.handleBlur} onClick={this.handleClick} @@ -184,7 +178,7 @@ export default class EditableTitle extends React.PureComponent { type={isEditing ? 'text' : 'button'} value={value} className={!title ? 'text-muted' : null} - onKeyUp={this.handleKeyUp} + onKeyDown={this.handleKeyDown} onChange={this.handleChange} onBlur={this.handleBlur} onClick={this.handleClick}