Merge pull request #253 from weseek/imprv/250-doesnot-focus-on-input-box

imprv/250-doesnot-focus-on-input-box

resource/css/crowi.scss

@@ -130,21 +130,6 @@ footer {
 
     form {
 
-      input.form-control {
-        border: none;
-        box-shadow: none;
-        border-bottom: dotted 1px #444;
-        border-radius: 0;
-        padding: 6px;
-        height: 34px;
-        font-weight: bold;
-        background: #f0f0f0;
-
-        &:focus {
-          background: #ddd;
-        }
-      }
-
       .page-name-addons {
         position: absolute;
         top: 7px;
@@ -166,6 +151,10 @@ footer {
         // width: 100%;
         display: inline-block;
       }
+      #page-name-inputter input {
+        min-width: 300px; // Workaround to display placeholder.
+                          //   cf https://github.com/ericgio/react-bootstrap-typeahead/issues/256
+      }
     }
   }
 }

resource/js/components/SearchTypeahead.js

@@ -21,7 +21,6 @@ export default class SearchTypeahead extends React.Component {
       pages: [],
       isLoading: false,
       searchError: null,
-      isFocused: false,
     };
     this.crowi = this.props.crowi;
     this.emptyLabel = props.emptyLabel;
@@ -33,9 +32,6 @@ export default class SearchTypeahead extends React.Component {
     this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);
     this.restoreInitialData = this.restoreInitialData.bind(this);
     this.getTypeahead = this.getTypeahead.bind(this);
-    this.forceToFocus = this.forceToFocus.bind(this);
-    this.onInputBlur = this.onInputBlur.bind(this);
-    this.onInputFocus = this.onInputFocus.bind(this);
   }
 
   /**
@@ -46,36 +42,11 @@ export default class SearchTypeahead extends React.Component {
   }
 
   componentDidMount() {
-    this.forceToFocus(); // cf. It is needed for displaing placeholder.
-                         //     And cannot focus on if set autoFocus=true to AsyncTypeahead,
-                         //       also set to inputProps of AsyncTypeahead.
   }
 
   componentWillUnmount() {
   }
 
-  /**
-   * force to focus
-   */
-  forceToFocus() {
-    const typeahead = this.getTypeahead();
-    if (typeahead == null) return;
-    const intervalId = setInterval(() => {
-      this.getTypeahead().focus();
-      if (this.state.isFocused) {
-        clearInterval(intervalId);
-      }
-    }, 100);
-  }
-
-  onInputBlur() {
-    this.setState({isFocused: false});
-  }
-
-  onInputFocus() {
-    this.setState({isFocused: true});
-  }
-
   search(keyword) {
 
     if (keyword === '') {
@@ -190,8 +161,6 @@ export default class SearchTypeahead extends React.Component {
           renderMenuItemChildren={this.renderMenuItemChildren}
           caseSensitive={false}
           defaultSelected={defaultSelected}
-          onBlur={this.onInputBlur}
-          onFocus={this.onInputFocus}
         />
         {restoreFormButton}
       </span>