From 4b54bb722f1116a6232efe42f9f3e966fbbe134c Mon Sep 17 00:00:00 2001 From: Donielle Berg Date: Thu, 19 Apr 2018 22:41:16 -0700 Subject: [PATCH] Change inline edit to be able to Tab from inline edit to 'x' button. When 'x' is focused, Tab agin blurs the field --- components/forms/input/inline.jsx | 20 +- package-lock.json | 371 ++++++++++++++++++------------ package.json | 10 +- 3 files changed, 246 insertions(+), 155 deletions(-) diff --git a/components/forms/input/inline.jsx b/components/forms/input/inline.jsx index 060268e33f..6023c8885a 100644 --- a/components/forms/input/inline.jsx +++ b/components/forms/input/inline.jsx @@ -99,6 +99,7 @@ const defaultProps = { class InlineEdit extends React.Component { constructor (props) { super(props); + this.state = { isEditing: false, value: null, @@ -115,6 +116,13 @@ class InlineEdit extends React.Component { } } + handleCloseBtnClick = () => { + this.endEditMode(); + setTimeout(() => { + this.editButtonRef.focus(); + }, 100); + } + endEditMode = (option) => { if (this.willSave) { clearTimeout(this.willSave); @@ -129,7 +137,7 @@ class InlineEdit extends React.Component { if (this.props.onLeaveEditMode && isFunction(this.props.onLeaveEditMode)) { this.props.onLeaveEditMode(undefined, option); } - }; + } handleBlur = () => { if (!this.willSave) { @@ -138,13 +146,13 @@ class InlineEdit extends React.Component { if (this.props.onLeaveEditMode && isFunction(this.props.onLeaveEditMode)) { this.props.onLeaveEditMode(); } - }; + } handleChange = (event) => { this.setState({ value: event.target.value, }); - }; + } handleKeyDown = (event) => { if (event.keyCode) { @@ -212,8 +220,8 @@ class InlineEdit extends React.Component { category="utility" name="close" position="right" - onClick={this.endEditMode} - tabIndex="-1" + onBlur={this.handleBlur} + onClick={this.handleCloseBtnClick} /> ) : null } @@ -221,6 +229,7 @@ class InlineEdit extends React.Component { inlineEditTrigger={