Skip to content
This repository has been archived by the owner on Nov 2, 2021. It is now read-only.

Fix: Debounce input events on search in home page #1532

Merged
merged 8 commits into from
Apr 25, 2020
Merged

Fix: Debounce input events on search in home page #1532

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2296d44
fix the issue of home page serach bar blocking using debounce in reac…
Apr 25, 2020
59128fd
fix the issue of home page serach bar blocking using debounce in reac…
Apr 25, 2020
0628376
clear the results after clearing the input
Apr 25, 2020
40c86be
added comment & changed timer
Apr 25, 2020
08c311d
changed comment
Apr 25, 2020
9a20c6a
changed timer
Apr 25, 2020
50face4
added name export
Apr 25, 2020
8e6a737
added inbuild debounce
Apr 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion src/components/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Bloodhound from 'corejs-typeahead';
import React, {useState, useCallback, useRef} from 'react';
import * as Icon from 'react-feather';
import {Link} from 'react-router-dom';
import {useDebounce} from 'react-use';

const engine = new Bloodhound({
initialize: true,
Expand Down Expand Up @@ -106,6 +107,18 @@ function Search(props) {
essentialsEngine.search(searchInput, essentialsSync, essentialsAsync);
}, []);

useDebounce(
() => {
if (searchValue) {
handleSearch(searchValue.toLowerCase());
} else {
setResults([]);
}
},
800,
[searchValue]
);

function setNativeValue(element, value) {
const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
const prototype = Object.getPrototypeOf(element);
Expand Down Expand Up @@ -138,7 +151,6 @@ function Search(props) {
}}
onChange={(event) => {
setSearchValue(event.target.value);
handleSearch(event.target.value.toLowerCase());
}}
/>

Expand Down