Merge branch 'master' into feat/3176-grid-edit-modal-for-master-merge

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;

src/client/js/components/PageCreateModal.jsx

@@ -166,6 +166,7 @@ const PageCreateModal = (props) => {
                     addTrailingSlash
                     onSubmit={ppacSubmitHandler}
                     onInputChange={ppacInputChangeHandler}
+                    autoFocus
                   />
                 )
                 : (
@@ -243,7 +244,13 @@ const PageCreateModal = (props) => {
   }
 
   return (
-    <Modal size="lg" isOpen={navigationContainer.state.isPageCreateModalShown} toggle={navigationContainer.closePageCreateModal} className="grw-create-page">
+    <Modal
+      size="lg"
+      isOpen={navigationContainer.state.isPageCreateModalShown}
+      toggle={navigationContainer.closePageCreateModal}
+      className="grw-create-page"
+      autoFocus={false}
+    >
       <ModalHeader tag="h4" toggle={navigationContainer.closePageCreateModal} className="bg-primary text-light">
         { t('New Page') }
       </ModalHeader>

src/client/js/components/PageDuplicateModal.jsx

@@ -120,7 +120,7 @@ const PageDuplicateModal = (props) => {
   }
 
   return (
-    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose} className="grw-duplicate-page">
+    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose} className="grw-duplicate-page" autoFocus={false}>
       <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">
         { t('modal_duplicate.label.Duplicate page') }
       </ModalHeader>
@@ -141,6 +141,7 @@ const PageDuplicateModal = (props) => {
                   initializedPath={path}
                   onSubmit={ppacSubmitHandler}
                   onInputChange={ppacInputChangeHandler}
+                  autoFocus
                 />
               )
               : (

src/client/js/components/PageEditor/LinkEditModal.jsx

@@ -5,6 +5,7 @@ import {
   Modal,
   ModalHeader,
   ModalBody,
+  ModalFooter,
   Popover,
   PopoverBody,
 } from 'reactstrap';
@@ -445,17 +446,15 @@ class LinkEditModal extends React.PureComponent {
               {this.renderLinkPreview()}
             </div>
           </div>
-          <div className="row">
-            <div className="col-12 text-center">
-              <button type="button" className="btn btn-sm btn-outline-secondary mx-1" onClick={this.hide}>
-                {t('Cancel')}
-              </button>
-              <button type="submit" className="btn btn-sm btn-primary mx-1" onClick={this.save}>
-                {t('Done')}
-              </button>
-            </div>
-          </div>
         </ModalBody>
+        <ModalFooter>
+          <button type="button" className="btn btn-sm btn-outline-secondary mx-1" onClick={this.hide}>
+            {t('Cancel')}
+          </button>
+          <button type="submit" className="btn btn-sm btn-primary mx-1" onClick={this.save}>
+            {t('Done')}
+          </button>
+        </ModalFooter>
       </Modal>
     );
   }

src/client/js/components/PagePathAutoComplete.jsx

@@ -44,6 +44,7 @@ const PagePathAutoComplete = (props) => {
       emptyLabelExceptError={null}
       placeholder="Input page path"
       keywordOnInit={getKeywordOnInit(initializedPath)}
+      autoFocus={props.autoFocus}
     />
   );
 
@@ -55,10 +56,12 @@ PagePathAutoComplete.propTypes = {
 
   onSubmit:         PropTypes.func,
   onInputChange:    PropTypes.func,
+  autoFocus:        PropTypes.bool,
 };
 
 PagePathAutoComplete.defaultProps = {
-  initializedPath: '/',
+  initializedPath:  '/',
+  autoFocus:        false,
 };
 
 export default PagePathAutoComplete;

src/client/js/components/PageRenameModal.jsx

@@ -134,7 +134,7 @@ const PageRenameModal = (props) => {
   }
 
   return (
-    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose}>
+    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose} autoFocus={false}>
       <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">
         { t('modal_rename.label.Move/Rename page') }
       </ModalHeader>
@@ -156,6 +156,7 @@ const PageRenameModal = (props) => {
                 className="form-control"
                 onChange={e => inputChangeHandler(e.target.value)}
                 required
+                autoFocus
               />
             </form>
           </div>