Using showClear causes TypeError when selecting result
Closed this issue · 4 comments
ggogel commented
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 commented
@ggogel Hello,
can you please provide an example with the issue? I'm unable to reproduce it.
Cheers!
ggogel commented
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.