unable to remove first character from search in input react js

user_11554426 0
Viewed 1200

I have made a search field with debouncing. Everything works fine but when I try to empty the search field with backspace it continuously re-show all characters and does not remove them(the first character is always there).

you can see it in the attached gif

Search field

my parent component

  class ParentComponent extends React.Component {
        this.queryParam = {
                keyword: ''
             }
   
  keywordSearch = value => {
     const {
       history: { push },
       match: { url },
       location: { search },
       } = this.props;

    queryParams = {...queryParams, keyword: value, };

    push(`${url}?${queryString})
   };
   
   render() {
        <SearchComponent
            value={this.queryParams.keyword}
            onUpdate={this.keywordSearch}
         />
     }
  }

my search field component

   const SearchComponent = ({ value, onUpdate }) => {
    const [fieldValue, setFieldValue] = useState(value);

    const handleChange = ({ target: { value } }) => {
       debounceFunc(() => {
            onUpdate(value);
         }, 300);
         setFieldValue(value);
        };

   return (
      <Input
      value={fieldValue || value}
      disableUnderline
      onChange={handleChange}
      className={classes.root}
      placeholder='Search'
      startAdornment={
         <InputAdornment position="start">
           <Search className={classes.icon} fontSize="small" />
         </InputAdornment>
        }
     />
  }

here is my custom debounce component

  export const debounceFunction = () => {
    let timeOut = null;
    return (callBack, wait) => {
    if (timeOut) clearTimeout(timeOut);
    timeOut = setTimeout(() => {
        callBack();
     }, wait);
    };
   };
  export const debounceFunc = debounceFunction();

the problem is in this debounce function. can anyone help me in this regard? why it isn't removing the first character? Thanks

debounce reactjs search javascript
2 Answers

First problem is <Input value={fieldValue || value}
=> use just the local state: <Input value={fieldValue} to change the visible value immediatelly.

Second problem is this.queryParams.keyword being an instance property, not a React State
=> use this.state.... and this.setState(...) (or Hooks) to update debounced state in the parent

user_11766010

I have changed debounceFunction parameter and the way to use it. Can you give it a try

    const SearchComponent = ({ value, onUpdate }) => {
        const [fieldValue, setFieldValue] = useState(value);
        
const debouncedUpdate = debounceFunction(onUpdate, 300);

        const handleChange = ({ target: { value } }) => {
           debouncedUpdate(value);
            setFieldValue(value);
           };
    
       return (
          <Input
          value={fieldValue || value}
          disableUnderline
          onChange={handleChange}
          className={classes.root}
          placeholder='Search'
          startAdornment={
             <InputAdornment position="start">
               <Search className={classes.icon} fontSize="small" />
             </InputAdornment>
            }
         />
      } 
    
      
    
    export const debounceFunction = (callBack, wait) => {
        let timeOut = null;
        return () => {
        if (timeOut) clearTimeout(timeOut);
        timeOut = setTimeout(() => {
            callBack();
         }, wait);
        };
       };
      export const debounceFunc = debounceFunction();
user_47126260
Related