add autoFocus to tag input

src/client/js/components/Page/TagEditModal.jsx

@@ -35,12 +35,12 @@ function TagEditModal(props) {
   }
 
   return (
-    <Modal isOpen={props.isOpen} toggle={closeModalHandler} id="edit-tag-modal">
+    <Modal isOpen={props.isOpen} toggle={closeModalHandler} id="edit-tag-modal" autoFocus={false}>
       <ModalHeader tag="h4" toggle={closeModalHandler} className="bg-primary text-light">
         Edit Tags
       </ModalHeader>
       <ModalBody>
-        <TagsInput tags={tags} onTagsUpdated={onTagsUpdatedByTagsInput} />
+        <TagsInput tags={tags} onTagsUpdated={onTagsUpdatedByTagsInput} autoFocus />
       </ModalBody>
       <ModalFooter>
         <button type="button" className="btn btn-primary" onClick={handleSubmit}>

src/client/js/components/Page/TagsInput.jsx

@@ -82,6 +82,7 @@ class TagsInput extends React.Component {
           options={this.state.resultTags} // Search result (Some tag names)
           placeholder="tag name"
           selectHintOnEnter
+          autoFocus={this.props.autoFocus}
         />
       </div>
     );
@@ -95,13 +96,15 @@ class TagsInput extends React.Component {
 const TagsInputWrapper = withUnstatedContainers(TagsInput, [AppContainer]);
 
 TagsInput.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  appContainer:  PropTypes.instanceOf(AppContainer).isRequired,
 
-  tags: PropTypes.array.isRequired,
+  tags:          PropTypes.array.isRequired,
   onTagsUpdated: PropTypes.func.isRequired,
+  autoFocus:     PropTypes.bool,
 };
 
 TagsInput.defaultProps = {
+  autoFocus:     false,
 };
 
 export default TagsInputWrapper;