diff --git a/CHANGELOG.md b/CHANGELOG.md index d8a7080cf..8a32f0ccb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## v1.3.2 [unreleased] + +### Bug Fixes + +### Features + +### UI Improvements + 1. [#1508](https://github.com/influxdata/chronograf/pull/1508): The enter and escape keys now perform as expected when renaming dashboard headers. + ## v1.3.1 [unreleased] ### Bug Fixes diff --git a/ui/src/dashboards/components/DashboardHeaderEdit.js b/ui/src/dashboards/components/DashboardHeaderEdit.js index d3be7073f..2adf97fd8 100644 --- a/ui/src/dashboards/components/DashboardHeaderEdit.js +++ b/ui/src/dashboards/components/DashboardHeaderEdit.js @@ -8,12 +8,27 @@ class DashboardEditHeader extends Component { const {dashboard: {name}} = props this.state = {name} this.handleChange = ::this.handleChange + this.handleFormSubmit = ::this.handleFormSubmit + this.handleKeyUp = ::this.handleKeyUp } handleChange(name) { this.setState({name}) } + handleFormSubmit(e) { + e.preventDefault() + const name = e.target.name.value + this.props.onSave(name) + } + + handleKeyUp(e) { + const {onCancel} = this.props + if (e.key === 'Escape') { + onCancel() + } + } + render() { const {onSave, onCancel} = this.props const {name} = this.state @@ -21,15 +36,18 @@ class DashboardEditHeader extends Component { return (
-
+
this.handleChange(e.target.value)} + onKeyUp={this.handleKeyUp} + autoComplete="off" /> -
+