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

@@ -99,6 +99,7 @@ const defaultProps = {
 class InlineEdit extends React.Component {
 	constructor (props) {
 		super(props);
+
 		this.state = {
 			isEditing: false,
 			value: null,
@@ -115,7 +116,14 @@ class InlineEdit extends React.Component {
 		}
 	}
 
-	endEditMode = (option) => {
+	handleCloseBtnClick = () => {
+		this.endEditMode()
+		setTimeout(() => {
+			this.editButtonRef.focus()
+		}, 100)
+	}
+
+	endEditMode = () => {
 		if (this.willSave) {
 			clearTimeout(this.willSave);
 			delete this.willSave;
@@ -212,15 +220,16 @@ 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 +238,6 @@ class InlineEdit extends React.Component {
 						variant="icon"
 					/>
 				}
-				onBlur={this.handleBlur}
 				onChange={this.handleChange}
 				onClick={!this.state.isEditing ? this.triggerEditMode : null}
 				onKeyDown={this.handleKeyDown}