Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-09-21 03:08:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: Add debounce for 300 ms when searching (#1089)

Browse Source 
Co-authored-by: Roman Hotsiy <gotsijroman@gmail.com>
This commit is contained in:
Faheem Abrar 2020-03-16 10:01:21 -04:00 committed by GitHub
parent af415e89e8
commit 373f018d0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/integration/search.e2e.ts
View File

@ -27,6 +27,8 @@ describe('Search', () => {
it('should support arrow navigation', () => {
getSearchInput().type('int', { force: true });
cy.wait(500);
getSearchInput().type('{downarrow}', { force: true });
getResult(0).should('have.class', 'active');

21
src/components/SearchBox/SearchBox.tsx
View File

@ -7,6 +7,7 @@ import { MenuItem } from '../SideMenu/MenuItem';
import { MarkerService } from '../../services/MarkerService';
import { SearchResult } from '../../services/SearchWorker.worker';
import { bind, debounce } from 'decko';
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
import {
ClearIcon,
@ -94,11 +95,18 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
setResults(results: SearchResult[], term: string) {
this.setState({
results,
term,
});
this.props.marker.mark(term);
}
@bind
@debounce(400)
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) {
@ -106,13 +114,12 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
return;
}
this.setState({
this.setState(
{
term: q,
});
this.props.search.search(event.target.value).then(res => {
this.setResults(res, q);
});
},
() => this.searchCallback(this.state.term),
);
};
render() {