Do not show custom value in popup while typing it

[Nick Lechnowskyj]

I would like to mimic two behaviors as Gmail recipient input.

1. When you are typing a custom value that doesn't exist in the datasource the popup shouldn't appear. (If the user commits the custom value I will update the datasource on my own and then it will show up in the list on the next filter)
2. When you are typing a custom value that does match an item in the datasource the custom value shouldn't show up in the popup while you are typing it (the first filtered item from the datasource should be highlighted so that you can quickly select it).

tsx file:



import * as ReactDOM from 'react-dom';

import { useState } from 'react';

import {

DataManager,

Query,

ReturnOption,

UrlAdaptor

} from '@syncfusion/ej2-data';

import '@syncfusion/ej2-base/styles/material.css';

import '@syncfusion/ej2-buttons/styles/material.css';

import '@syncfusion/ej2-inputs/styles/material.css';

import '@syncfusion/ej2-react-dropdowns/styles/material.css';

import {

ChangeEventArgs,

FilteringEventArgs,

FocusEventArgs,

MultiSelectComponent,

TaggingEventArgs

} from '@syncfusion/ej2-react-dropdowns';

import './RecipientInput.scss';

const RecipientInput = (props) => {

const searchData: { [key: string]: Object }[] = [

{ index: '[email protected]', country: '[email protected]' },

{ index: '[email protected]', country: '[email protected]' },

{ index: '[email protected]', country: '[email protected]' },

{ index: '[email protected]', country: '[email protected]' }

];

let fields: object = { text: 'country', value: 'index' };

let multiselectComponent: MultiSelectComponent;

let onTagging = (e: TaggingEventArgs) => {

if (e.itemData['country'].indexOf('@') < 0) {

e.setClass('invalid');

}

// set the current selected item text as class to chip element.

// e.setClass((e.itemData as any)[this.fields.text].toLowerCase());

};

const onSelect = () => {

props.recipients(multiselectComponent.value);

}

const onFiltering = (args: FilteringEventArgs) => {

let query = new Query();

// frame the query based on search string with filter type.

query =

args.text !== ''

? query.where('country', 'startswith', args.text, true)

: query;

// pass the filter data source, filter query to updateData method.

args.updateData(searchData, query);

};

return (

<MultiSelectComponent

ref={(scope) => {

(multiselectComponent as MultiSelectComponent | null) = scope;

}}

mode="Default"

onChange={onSelect}

showClearButton={true}

allowCustomValue={true}

addTagOnBlur={true}

openOnClick={false}

closePopupOnSelect={true}

dataSource={searchData}

fields={fields}

allowFiltering={true}

htmlAttributes={{ innerHeight: '24px' }}

filtering={onFiltering}

tagging={onTagging}

/>

);

};

export default RecipientInput;

[Sureshkumar P]

Query: When you are typing a custom value that does match an item in the datasource the custom value shouldn't show up in the popup while you are typing it (the first filtered item from the datasource should be highlighted so that you can quickly select it).

This is the default behavior of our component. after entering the custom value initial time, the second time searched text will showcase in the popup element. we have created the custom value sample based on your requirement.

Please find the sample here: https://stackblitz.com/edit/react-mbqd4o?file=index.js

If still, you have faced the same issue, then please replicate the reported issue in the attached sample and revert us with a detailed issue replication procedure. These details will help us to provide an exact solution as earlier as possible.