not allow use space in tag name and fix bug

src/client/js/components/PageTagForm.jsx

@@ -20,36 +20,60 @@ export default class PageTagForm extends React.Component {
       resultTags: [],
       isLoading: false,
       selected: this.props.currentPageTags,
+      defaultPageTags: this.props.currentPageTags,
     };
     this.crowi = this.props.crowi;
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleChange(selected) {
+    // list is a list of object about value. an element have customOption, id and label properties
+    this.setState({ selected }, () => {
+      this.props.addNewTag(this.state.selected);
+    });
+  }
+
+  async handleSearch(query) {
+    this.setState({ isLoading: true });
+    const res = await this.crowi.apiGet('/tags.search', { q: query });
+    res.tags.unshift(query); // selectable new tag whose name equals query
+    this.setState({
+      resultTags: Array.from(new Set(res.tags)), // use Set for de-duplication
+      isLoading: false,
+    });
+  }
+
+  handleSelect(e) {
+    if (e.keyCode === 32) {
+      e.preventDefault();
+      const instance = this.typeahead.getInstance();
+      const { initialItem } = instance.state;
+
+      if (initialItem) {
+        instance._handleMenuItemSelect(initialItem, e);
+      }
+    }
   }
 
   render() {
     return (
       <div className="tag-typeahead">
         <AsyncTypeahead
-          allowNew
+          id="async-typeahead"
+          // eslint-disable-next-line no-return-assign
+          ref={(typeahead) => { return this.typeahead = typeahead }}
           caseSensitive={false}
-          defaultSelected={this.props.currentPageTags}
-          emptyLabel=""
+          defaultSelected={this.state.defaultPageTags}
           isLoading={this.state.isLoading}
           minLength={1}
           multiple
           newSelectionPrefix=""
-          onChange={(selected) => {
-            this.setState({ selected }, () => {
-              this.props.addNewTag(this.state.selected);
-            });
-          }}
-          onSearch={async(query) => {
-            this.setState({ isLoading: true });
-            const res = await this.crowi.apiGet('/tags.search', { q: query });
-            res.tags.unshift(query); // selectable new tag whose name equals query
-            this.setState({
-              resultTags: Array.from(new Set(res.tags)), // use Set for de-duplication
-              isLoading: false,
-            });
-          }}
+          onChange={this.handleChange}
+          onSearch={this.handleSearch}
+          onKeyDown={this.handleSelect}
           options={this.state.resultTags} // Search result (Some tag names)
           placeholder="tag name"
           selectHintOnEnter