Auto complete is not working properly when using text property

Posted by: vivek.casula on 27 February 2023, 6:55 pm EST

    • Post Options:
    • Link

    Posted 27 February 2023, 6:55 pm EST


    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}`}
                text={ selText}
                placeholder={placeholder || "Search Contact"}



  • Posted 28 February 2023, 4:05 pm EST


    Sorry, but we are unable to replicate the issue on our end, as there is no such behavior observed on our side. In order to better understand the issue you are facing, we kindly request that you provide us with a sample that demonstrates the problem. This will help us to diagnose the issue more effectively and provide a suitable solution.

    Here is the sample in which we tried to replicate your issue -

    In case, if there is something we missed, please let us know.


Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels