diff --git a/src/components/Redoc/Redoc.tsx b/src/components/Redoc/Redoc.tsx index 6cc9d679..2ee92915 100644 --- a/src/components/Redoc/Redoc.tsx +++ b/src/components/Redoc/Redoc.tsx @@ -62,7 +62,7 @@ export class Redoc extends React.Component { marker={marker} getItemById={menu.getItemById} onActivate={menu.activateAndScroll} - setActiveSelection={() => this.setActiveSelection} + setActiveSelection={this.setActiveSelection} /> )) || null} diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx index 59e7d44f..2bb34a79 100644 --- a/src/components/SearchBox/SearchBox.tsx +++ b/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; 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 { + this.setResults(res, searchTerm); + }); + } + search = (event: React.ChangeEvent) => { const q = event.target.value; if (q.length < 3) { @@ -108,13 +116,12 @@ export class SearchBox extends React.PureComponent { - this.setResults(res, q); - }); + this.setState( + { + term: q, + }, + () => this.searchCallback(this.state.term), + ); }; render() { @@ -155,7 +162,8 @@ export class SearchBox extends React.PureComponent this.props.setActiveSelection} + setActiveSelection={this.props.setActiveSelection} + isSearchItem={true} /> ))} diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx index df091362..05c7a1ba 100644 --- a/src/components/SideMenu/MenuItem.tsx +++ b/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 { ref = React.createRef(); activate = (evt: React.MouseEvent) => { + 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 { } } + searchItemClick(item: IMenuItem) { + if (item.parent) { + this.props.setActiveSelection(item.parent); + } + } + render() { const { item, withoutChildren } = this.props; return (