Răsfoiți Sursa

Merge pull request #3247 from weseek/imprv/focus-link-input-when-open-link-edit-modal

Imprv/focus link input when open link edit modal
Yuki Takei 5 ani în urmă
părinte
comite
aabaff0700

+ 2 - 1
src/client/js/components/PageEditor/LinkEditModal.jsx

@@ -299,6 +299,7 @@ class LinkEditModal extends React.PureComponent {
                 placeholder="Input page path or URL"
                 placeholder="Input page path or URL"
                 keywordOnInit={this.state.linkInputValue}
                 keywordOnInit={this.state.linkInputValue}
                 behaviorOfResetBtn="clear"
                 behaviorOfResetBtn="clear"
+                autoFocus
               />
               />
               <div className="d-none d-sm-block input-group-append">
               <div className="d-none d-sm-block input-group-append">
                 <button type="button" id="preview-btn" className="btn btn-info btn-page-preview">
                 <button type="button" id="preview-btn" className="btn btn-info btn-page-preview">
@@ -421,7 +422,7 @@ class LinkEditModal extends React.PureComponent {
 
 
   render() {
   render() {
     return (
     return (
-      <Modal className="link-edit-modal" isOpen={this.state.show} toggle={this.cancel} size="lg">
+      <Modal className="link-edit-modal" isOpen={this.state.show} toggle={this.cancel} size="lg" autoFocus={false}>
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
           Edit Links
           Edit Links
         </ModalHeader>
         </ModalHeader>

+ 3 - 3
src/client/js/components/SearchTypeahead.jsx

@@ -44,9 +44,6 @@ class SearchTypeahead extends React.Component {
   }
   }
 
 
   componentDidMount() {
   componentDidMount() {
-    // **MEMO** This doesn't work at this time -- 2019.05.13 Yuki Takei
-    // It is needed to use Modal component of react-bootstrap when showing Move/Duplicate/CreateNewPage modals
-    // this.typeahead.getInstance().focus();
   }
   }
 
 
   componentWillUnmount() {
   componentWillUnmount() {
@@ -222,6 +219,7 @@ class SearchTypeahead extends React.Component {
           renderMenuItemChildren={this.renderMenuItemChildren}
           renderMenuItemChildren={this.renderMenuItemChildren}
           caseSensitive={false}
           caseSensitive={false}
           defaultSelected={defaultSelected}
           defaultSelected={defaultSelected}
+          autoFocus={this.props.autoFocus}
           onBlur={this.props.onBlur}
           onBlur={this.props.onBlur}
           onFocus={this.props.onFocus}
           onFocus={this.props.onFocus}
         />
         />
@@ -256,6 +254,7 @@ SearchTypeahead.propTypes = {
   placeholder:     PropTypes.string,
   placeholder:     PropTypes.string,
   keywordOnInit:   PropTypes.string,
   keywordOnInit:   PropTypes.string,
   helpElement:     PropTypes.object,
   helpElement:     PropTypes.object,
+  autoFocus:       PropTypes.bool,
   behaviorOfResetBtn: PropTypes.oneOf(['restore', 'clear']),
   behaviorOfResetBtn: PropTypes.oneOf(['restore', 'clear']),
 };
 };
 
 
@@ -269,6 +268,7 @@ SearchTypeahead.defaultProps = {
   placeholder:     '',
   placeholder:     '',
   keywordOnInit:   '',
   keywordOnInit:   '',
   behaviorOfResetBtn: 'restore',
   behaviorOfResetBtn: 'restore',
+  autoFocus:       false,
   onInputChange: () => {},
   onInputChange: () => {},
 };
 };