Added a keyboard shortcut to set focus to the query string.

master
Pacman Ghost 4 years ago
parent 8d3b886c9d
commit ecc8d77374
  1. 15
      web/src/App.js
  2. 2
      web/src/SearchForm.js

@ -378,7 +378,7 @@ export class App extends React.Component
onKeyDown( evt ) {
// check if a modal dialog is open and Ctrl-Enter was pressed
if ( this._modalFormRef && evt.keyCode === 13 && evt.ctrlKey ) {
if ( this._modalFormRef.current && evt.keyCode === 13 && evt.ctrlKey ) {
let dlg = ReactDOM.findDOMNode( this._modalFormRef.current ) ;
if ( dlg ) {
// yup - accept the dialog
@ -389,6 +389,19 @@ export class App extends React.Component
console.log( "ERROR: Can't find default button." ) ;
}
}
// check for other shortcuts
if ( ! this._modalFormRef.current ) {
// Alt-R: set focus to query string
if ( evt.key === "r" && evt.altKey ) {
if ( this._searchFormRef.current ) {
let elem = this._searchFormRef.current.queryStringRef.current ;
if ( elem ) {
elem.focus() ;
elem.select() ;
}
}
}
}
}
logInternalError( msg, detail ) {

@ -20,7 +20,7 @@ export default class SearchForm extends React.Component
render() {
return (
<form id="search-form" onSubmit={this.onSearch.bind(this)}>
<label className="caption"> Search&nbsp;for: </label>
<label className="caption"> Sea<u>r</u>ch&nbsp;for: </label>
<input type="text" className="query"
value = {this.state.queryString}
onChange = { e => this.setState( { queryString: e.target.value } ) }

Loading…
Cancel
Save