Update host when user hits Enter in host selector.

This commit is contained in:
aforge
2022-08-24 12:36:10 +03:00
parent 8b80f59d3a
commit 384955777d
+9 -1
View File
@@ -15,6 +15,7 @@ export default class HostSelector extends React.PureComponent {
this.handleHostNameChange = this.handleHostNameChange.bind(this); this.handleHostNameChange = this.handleHostNameChange.bind(this);
this.handleEditingFinished = this.handleEditingFinished.bind(this); this.handleEditingFinished = this.handleEditingFinished.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
} }
handleHostNameChange(e) { handleHostNameChange(e) {
@@ -28,6 +29,12 @@ export default class HostSelector extends React.PureComponent {
} }
} }
handleKeyDown(e) {
if (e.key == 'Enter') {
this.handleEditingFinished();
}
}
render() { render() {
var hostOptions = []; var hostOptions = [];
for (let key in KNOWN_HOSTS) { for (let key in KNOWN_HOSTS) {
@@ -40,7 +47,8 @@ export default class HostSelector extends React.PureComponent {
<div className="panel-form-row"> <div className="panel-form-row">
<input type="search" id="host-name" placeholder={this.props.hostName} list="known-hosts" <input type="search" id="host-name" placeholder={this.props.hostName} list="known-hosts"
className="quoted" value={this.state.hostName} onChange={this.handleHostNameChange} className="quoted" value={this.state.hostName} onChange={this.handleHostNameChange}
onBlur={this.handleEditingFinished} required /> onBlur={this.handleEditingFinished}
onKeyDown={this.handleKeyDown} required />
<datalist id="known-hosts"> <datalist id="known-hosts">
{hostOptions} {hostOptions}
</datalist> </datalist>