Merge pull request #1332 from donnieberg/a11y-inlineEdit-fix

Change inline edit for a11y, eslint updates
salesforce · May 1, 2018 · 854bde7 · 854bde7
2 parents b7e2215 + 4c67a47
commit 854bde7
Show file tree

Hide file tree

Showing 3 changed files with 244 additions and 151 deletions.
diff --git 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);
@@ -212,15 +220,18 @@ class InlineEdit extends React.Component {
 							category="utility"
 							name="close"
 							position="right"
-							onClick={this.endEditMode}
-							tabIndex="-1"
+							onBlur={this.handleBlur}
+							onClick={this.handleCloseBtnClick}
 						/>
 					) : null
 				}
 				disabled={disabled}
 				inlineEditTrigger={
 					<Button
 						assistiveText={assistiveText}
+						buttonRef={(component) => {
+							if (component) this.editButtonRef = component;
+						}}
 						className="slds-m-left_x-small"
 						disabled={disabled}
 						iconName="edit"
@@ -229,7 +240,6 @@ class InlineEdit extends React.Component {
 						variant="icon"
 					/>
 				}
-				onBlur={this.handleBlur}
 				onChange={this.handleChange}
 				onClick={!this.state.isEditing ? this.triggerEditMode : null}
 				onKeyDown={this.handleKeyDown}