fix: only click save once to save cell (#14164)

influxdata · Jun 19, 2019 · 54fba2e · 54fba2e
1 parent 9b8e6e8
commit 54fba2e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/ui/src/dashboards/components/VEOHeader.tsx b/ui/src/dashboards/components/VEOHeader.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {PureComponent, MouseEvent} from 'react'
 
 // Components
 import RenamablePageTitle from 'src/pageLayout/components/RenamablePageTitle'
@@ -26,10 +26,11 @@ interface Props {
   onSave: () => void
 }
 
+const saveButtonClass = 'veo-header--save-cell-button'
+
 class VEOHeader extends PureComponent<Props> {
   public render() {
     const {name, onSetName, onCancel, onSave} = this.props
-
     return (
       <div className="veo-header">
         <Page.Header fullWidth={true}>
@@ -39,6 +40,7 @@ class VEOHeader extends PureComponent<Props> {
               onRename={onSetName}
               placeholder={DEFAULT_CELL_NAME}
               maxLength={CELL_NAME_MAX_LENGTH}
+              onClickOutside={this.handleClickOutsideTitle}
             />
           </Page.Header.Left>
           <Page.Header.Right>
@@ -50,6 +52,7 @@ class VEOHeader extends PureComponent<Props> {
               size={ComponentSize.Small}
             />
             <SquareButton
+              className={saveButtonClass}
               icon={IconFont.Checkmark}
               color={ComponentColor.Success}
               size={ComponentSize.Small}
@@ -61,6 +64,17 @@ class VEOHeader extends PureComponent<Props> {
       </div>
     )
   }
+
+  private handleClickOutsideTitle = (e: MouseEvent<HTMLElement>) => {
+    const {onSave} = this.props
+    const target = e.target as HTMLButtonElement
+
+    if (!target.className.includes(saveButtonClass)) {
+      return
+    }
+
+    onSave()
+  }
 }
 
 export default VEOHeader
diff --git a/ui/src/pageLayout/components/RenamablePageTitle.tsx b/ui/src/pageLayout/components/RenamablePageTitle.tsx
@@ -1,5 +1,10 @@
 // Libraries
-import React, {PureComponent, KeyboardEvent, ChangeEvent} from 'react'
+import React, {
+  PureComponent,
+  KeyboardEvent,
+  ChangeEvent,
+  MouseEvent,
+} from 'react'
 import classnames from 'classnames'
 
 // Components
@@ -12,6 +17,7 @@ import {IconFont} from 'src/clockface'
 
 interface Props {
   onRename: (name: string) => void
+  onClickOutside?: (e: MouseEvent<HTMLElement>) => void
   name: string
   placeholder: string
   maxLength: number
@@ -96,12 +102,16 @@ class RenamablePageTitle extends PureComponent<Props, State> {
     this.setState({isEditing: true})
   }
 
-  private handleStopEditing = async (): Promise<void> => {
+  private handleStopEditing = async (e): Promise<void> => {
     const {workingName} = this.state
-    const {onRename} = this.props
+    const {onRename, onClickOutside} = this.props
 
     await onRename(workingName)
 
+    if (onClickOutside) {
+      onClickOutside(e)
+    }
+
     this.setState({isEditing: false})
   }