Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-06 13:20:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: No match scenario in search

Browse Source 
fixes #1285
This commit is contained in:
Raghavi 2021-07-03 12:43:16 +05:30 committed by raghavi
parent 99618bbee7
commit 625f68ae30
2 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,4 +53,10 @@ describe('Search', () => {
getSearchInput().type('int', { force: true });
cy.get('[data-markjs]').should('exist');
});
it('should show proper message when no search results are found', () => {
getSearchResults().should('not.exist');
getSearchInput().type('xzss', {force: true});
getSearchResults().should('exist').should('contain', 'No results found!');
})
});

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

@ -28,6 +28,7 @@ export interface SearchBoxProps {
export interface SearchBoxState {
results: SearchResult[];
noResults: boolean;
term: string;
activeItemIdx: number;
}
@ -39,6 +40,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
super(props);
this.state = {
results: [],
noResults: false,
term: '',
activeItemIdx: -1,
};
@ -47,6 +49,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
clearResults(term: string) {
this.setState({
results: [],
noResults: false,
term,
});
this.props.marker.unmark();
@ -55,6 +58,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
clear = () => {
this.setState({
results: [],
noResults: false,
term: '',
activeItemIdx: -1,
});
@ -95,6 +99,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
setResults(results: SearchResult[], term: string) {
this.setState({
results,
noResults: results.length === 0
});
this.props.marker.mark(term);
}
@ -166,6 +171,8 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
</SearchResultsBox>
</PerfectScrollbarWrap>
)}
{(this.state.term) && this.state.noResults ? <SearchResultsBox data-role="search:results">No results found!</SearchResultsBox> : null
}
</SearchWrap>
);
}