Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-28 19:43:43 +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', () => { it('should support arrow navigation', () => {
getSearchInput().type('int', { force: true }); getSearchInput().type('int', { force: true });
cy.wait(500);
getSearchInput().type('{downarrow}', { force: true }); getSearchInput().type('{downarrow}', { force: true });
getResult(0).should('have.class', 'active'); 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 { MarkerService } from '../../services/MarkerService';
import { SearchResult } from '../../services/SearchWorker.worker'; import { SearchResult } from '../../services/SearchWorker.worker';
import { bind, debounce } from 'decko';
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar'; import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
import { import {
ClearIcon, ClearIcon,
@ -94,11 +95,18 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
setResults(results: SearchResult[], term: string) { setResults(results: SearchResult[], term: string) {
this.setState({ this.setState({
results, results,
term,
}); });
this.props.marker.mark(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>) => { search = (event: React.ChangeEvent<HTMLInputElement>) => {
const q = event.target.value; const q = event.target.value;
if (q.length < 3) { if (q.length < 3) {
@ -106,13 +114,12 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
return; return;
} }
this.setState({ this.setState(
{
term: q, term: q,
}); },
() => this.searchCallback(this.state.term),
this.props.search.search(event.target.value).then(res => { );
this.setResults(res, q);
});
}; };
render() { render() {