From 1cb10e4dd5f4224457eae3efe0a124ba37e22c13 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Mon, 1 Feb 2021 20:57:32 +0800
Subject: [PATCH] [CE] search: added auto focus for the input (#4809)

---
 frontend/src/components/dialog/search-file-dialog.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/dialog/search-file-dialog.js b/frontend/src/components/dialog/search-file-dialog.js
index 24c274363c..1e19f25cd3 100644
--- a/frontend/src/components/dialog/search-file-dialog.js
+++ b/frontend/src/components/dialog/search-file-dialog.js
@@ -23,6 +23,11 @@ class SearchFileDialog extends React.Component {
       errMessage: '',
       fileList: null
     };
+    this.inputRef = React.createRef();
+  }
+
+  componentDidMount() {
+    this.inputRef.current.focus();
   }
 
   searchFile = () => {
@@ -77,7 +82,7 @@ class SearchFileDialog extends React.Component {
         <ModalHeader toggle={this.toggle}>{gettext('Search')}</ModalHeader>
         <ModalBody style={{height: '250px'}} className="o-auto">
           <div className="d-flex">
-            <input className="form-control mr-2" type="text" placeholder={gettext('Search files in this library')} value={q} onChange={this.handleInputChange} onKeyDown={this.handleKeyDown} />
+            <input className="form-control mr-2" type="text" placeholder={gettext('Search files in this library')} value={q} onChange={this.handleInputChange} onKeyDown={this.handleKeyDown} ref={this.inputRef} />
             <button type="submit" className={`btn btn-primary flex-shrink-0 ${isSubmitting ? 'btn-loading' : ''}`} onClick={this.searchFile} disabled={isSubmitDisabled}>{gettext('Search')}</button>
           </div>
           {errMessage && <Alert color="danger" className="mt-2">{errMessage}</Alert>}