Posted 27 February 2023, 6:55 pm EST
Hi,
I have created a react async auto complete component using wijmo. Without using text property, it is working as expected. But in my case, I need to display a text if I already had an item, else I need to search for an item.
When I tried to use text property to display the existing item, it is working and text is displaying. But when I tried to change the existing item to another item using search, dropdown is not closing. i.e., when we search for a different item, dropdown is opening and when I select any item, selected item is displaying. But it seems like the text property is firing the ItemSourceFunction again. So data is loading and dropdown keeps opening.
when we select any item, it keeps searching with the selected item but dropdown is not closing. How to fix this issue?
Below is the code used for creating the component:
[code]import * as wjInput from ‘@grapecity/wijmo.react.input’;
export interface AutoCompleteItem {
value: object
title: string;
description: string;
}
export function AutoCompleteComponent({ onDropdownChanged, searchCallBack, autoCompleteResultCounter, showCount, className, placeholder, isDisabled, selText }:
{
onDropdownChanged: ((selectedValues: object) => void),
searchCallBack: (query: string, max: number, callback: Function) => void,
autoCompleteResultCounter: string,
showCount?: boolean
className?: string,
placeholder?: string,
isDisabled?: boolean,
selText?: string
})
{
const autoCompleteSelectedIndexChanged = (sender: any) => {
if (sender.selectedValue != null) {
onDropdownChanged(sender.selectedValue as AutoCompleteItem);
}
}
return ( <div className="form-group"> {showCount && autoCompleteResultCounter && <label>total {autoCompleteResultCounter} results found</label>} <wjInput.AutoComplete id="auto-completeId" displayMemberPath="title" isContentHtml={true} minLength={2} maxDropDownHeight={350} className="auto-complete-box" dropDownCssClass={`react auto-complete-dropdown ${className}`} showDropDownButton={true} text={ selText} multiSelect={true} placeholder={placeholder || "Search Contact"} isEditable={false} isDisabled={isDisabled} isDropDownOpen={true} checkedMemberPath="checked" itemsSourceFunction={searchCallBack} selectedIndexChanged={autoCompleteSelectedIndexChanged} > </wjInput.AutoComplete> </div>
)
}[/code]
