Using showClear causes TypeError when selecting result

[ggogel]

Hello,

I'm currently trying to implement this module in a react project with typescript. Whenever showClear is set to true, it breaks the functionality of the module. When I click on a search result the following error is thrown:

Uncaught TypeError: searchString is undefined
    ClearIcon ClearIcon.js:39
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 17
    tsx index.tsx:21
    factory react refresh:6
    Webpack 3
ClearIcon.js:39
    ClearIcon ClearIcon.js:39
    React 11
    performSyncWorkOnRoot self-hosted:1230
    flushSyncCallbackQueueImpl React
    unstable_runWithPriority scheduler.development.js:468
    React 6
    bind_applyFunctionN self-hosted:1381
    dispatchDiscreteEvent self-hosted:1344
    React 4
    forEach self-hosted:4358
    React 7
    tsx index.tsx:21
    factory react refresh:6
    Webpack 3

This causes the whole app to crash.

The clear button itself works fine, though.

[sickdyd]

@ggogel Hello,

can you please provide an example with the issue? I'm unable to reproduce it.

Cheers!

[ggogel]

Here is the code of my component:

import React, { useState } from 'react';
import { ReactSearchAutocomplete } from 'react-search-autocomplete'
import { UserInfo } from '../UserTable';

interface SearchBarProps {
    users: UserInfo[] | undefined
}

let filter : UserInfo[] = [];
let searchActivated : boolean = false;

export function getFilter(){
  return filter;
}

export function getSearchActivated(){
  return searchActivated;
}

const SearchBar = (props:SearchBarProps) => {
  const items : UserInfo[] = props.users!;
  const [searchString, setSearchString] = useState("");

  const handleOnSearch = (string : string, results :UserInfo[]) => {
    filter = results;
    if(string.length == 0){
      searchActivated = false;
    }
    else{
      searchActivated = true;
    }
  }

  const handleOnClear = () => {
    setSearchString("");
    searchActivated = false;
  };

  const handleOnSelect = (item : UserInfo) => {
    setSearchString(item.displayName);
    filter = [item];
    searchActivated = true;
  }

  const formatResult = (item : UserInfo) => {
    return (
      <>
        <span style={{ display: 'block', textAlign: 'left' }}>{item.displayName}</span>
      </>
    )
  }

  var fuseOptions = {
    shouldSort: true,
    ignoreLocation: true,
    location: 0,
    threshold: 0.2,
    distance: 100,
    keys: ['displayName']
  };

  var styling =  {
    height: "44px",
    border: "1px solid #dfe1e5",
    borderRadius: "8px",
    backgroundColor: "#eee",
    boxShadow: "rgba(32, 33, 36, 0.28) 0px 1px 6px 0px",
    hoverBackgroundColor: "#fff",
    color: "#212121",
    fontSize: "16px",
    fontFamily: "Arial",
    iconColor: "grey",
    lineColor: "rgb(232, 234, 237)",
    placeholderColor: "grey",
    clearIconMargin: '3px 14px 0 0',
    searchIconMargin: '0 0 0 16px',
    zIndex: 10
  }

  return (
    <div style={{backgroundColor:"#fff",padding:20, marginTop:20, marginBottom: 20, border: "1px solid #dfe1e5", borderRadius: "8px"}}>
      <ReactSearchAutocomplete
        items={items}
        onSearch={handleOnSearch}
        onSelect={handleOnSelect}
        onClear={handleOnClear}
        autoFocus
        formatResult={formatResult}
        fuseOptions={fuseOptions}
        showClear={true}
        inputSearchString={searchString}
        styling={styling}
      />
    </div>
  )
}

export {SearchBar}

The type UserInfo:

export interface UserInfo {
  id: string; 
  displayName: string; 
  mail: string;
}

I already tried to remove inputSearchString={searchString}, which did not help either. As soon as I set showClear={true}, it breaks the select functionality.

[sickdyd]

@ggogel Sorry, could you make a codesandbox with the example and steps to reproduce? Also please use the latest version (6.1.2). Thanks!

[sickdyd]

@ggogel I could not reproduce, but I added a check that should solve this issue. Try the version 7.0.0 and see if the problems is solved.

This is the commit with the fix: https://github.com/sickdyd/react-search-autocomplete/commit/9022ecbcaee0d0417aca76619b58d0fc368e23e3