Make clicked search selections render their sections and scroll to item. Search box should no longer delete some inputs while typing.

src/components/Redoc/Redoc.tsx

@@ -62,7 +62,7 @@ export class Redoc extends React.Component<RedocProps, AppState> {
                     marker={marker}
                     getItemById={menu.getItemById}
                     onActivate={menu.activateAndScroll}
-                    setActiveSelection={() => this.setActiveSelection}
+                    setActiveSelection={this.setActiveSelection}
                   />
                 )) ||
                   null}

src/components/SearchBox/SearchBox.tsx

@@ -15,16 +15,16 @@ import {
   SearchResultsBox,
   SearchWrap,
 } from './styled.elements';
+import { bind, debounce } from 'decko';
 
 export interface SearchBoxProps {
   search: SearchStore<string>;
   marker: MarkerService;
   getItemById: (id: string) => IMenuItem | undefined;
   onActivate: (item: IMenuItem) => void;
+  setActiveSelection: (item: IMenuItem) => void;
 
   className?: string;
-
-  setActiveSelection: () => void;
 }
 
 export interface SearchBoxState {
@@ -101,6 +101,14 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
     this.props.marker.mark(term);
   }
 
+  @bind
+  @debounce(600)
+  searchCallback(searchTerm: string) {
+    this.props.search.search(searchTerm).then(res => {
+      this.setResults(res, searchTerm);
+    });
+  }
+
   search = (event: React.ChangeEvent<HTMLInputElement>) => {
     const q = event.target.value;
     if (q.length < 3) {
@@ -108,13 +116,12 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
       return;
     }
 
-    this.setState({
-      term: q,
-    });
-
-    this.props.search.search(event.target.value).then(res => {
-      this.setResults(res, q);
-    });
+    this.setState(
+      {
+        term: q,
+      },
+      () => this.searchCallback(this.state.term),
+    );
   };
 
   render() {
@@ -155,7 +162,8 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
                   withoutChildren={true}
                   key={res.item.id}
                   data-role="search:result"
-                  setActiveSelection={() => this.props.setActiveSelection}
+                  setActiveSelection={this.props.setActiveSelection}
+                  isSearchItem={true}
                 />
               ))}
             </SearchResultsBox>

src/components/SideMenu/MenuItem.tsx

@@ -10,6 +10,7 @@ import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styl
 
 export interface MenuItemProps {
   item: IMenuItem;
+  isSearchItem?: boolean;
   onActivate?: (item: IMenuItem) => void;
   setActiveSelection: (item: IMenuItem) => void;
   withoutChildren?: boolean;
@@ -20,6 +21,9 @@ export class MenuItem extends React.Component<MenuItemProps> {
   ref = React.createRef<HTMLLabelElement>();
 
   activate = (evt: React.MouseEvent<HTMLElement>) => {
+    if (this.props.isSearchItem) {
+      this.searchItemClick(this.props.item);
+    }
     this.props.setActiveSelection(this.props.item);
     this.props.onActivate!(this.props.item);
     evt.stopPropagation();
@@ -39,6 +43,12 @@ export class MenuItem extends React.Component<MenuItemProps> {
     }
   }
 
+  searchItemClick(item: IMenuItem) {
+    if (item.parent) {
+      this.props.setActiveSelection(item.parent);
+    }
+  }
+
   render() {
     const { item, withoutChildren } = this.props;
     return (