Custom Value in React MultiSelect Dropdown

The React MultiSelect enables users to add new custom options that are not present in the original data source when the allowCustomValue property is set to true. When a custom value is selected, the component triggers the customValueSelection event.

Enable custom value support

To enable custom values, set the allowCustomValue property to true on the React MultiSelect component:

<MultiSelectComponent allowCustomValue={true} />

Handle the customValueSelection event

When a custom value is added, the component raises the customValueSelection event. The event arguments expose the following members:

Property Type Description
itemData Object The data object of the new custom value being added.
item Element The custom value element being added.
isNewValue boolean Indicates whether the added value is a new custom value.
cancel boolean When set to true, cancels the addition of the custom value.

The following inline example shows how to bind the customValueSelection event to handle the new value:

onCustomValueSelection = (e) => {
    // Handle the added custom value here.
    console.log('New custom value added:', e.itemData);
};
<MultiSelectComponent allowCustomValue={true} customValueSelection={this.onCustomValueSelection} />

Binding the customValueSelection event is optional. The samples below demonstrate enabling allowCustomValue without an event handler.

[Class-component]

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // define the JSON of data
    sportsData = [
        { id: 'game1', sports: 'Badminton' },
        { id: 'game2', sports: 'Football' },
        { id: 'game3', sports: 'Tennis' }
    ];
    // maps the appropriate column to fields property
    fields = { text: 'sports', value: 'id' };
    render() {
        return (
        // specifies the tag for render the MultiSelect component
        <MultiSelectComponent id="mtselement" dataSource={this.sportsData} fields={this.fields} placeholder="Select a game" allowCustomValue={true}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {

    // define the JSON of data
    private sportsData: { [key: string]: Object }[] = [
        { id: 'game1', sports: 'Badminton' },
        { id: 'game2', sports: 'Football' },
        { id: 'game3', sports: 'Tennis' }
    ];

    // maps the appropriate column to fields property
    private fields: object = { text: 'sports', value: 'id' };

    public render() {
        return (
             // specifies the tag for render the MultiSelect component
            <MultiSelectComponent id="mtselement" dataSource={this.sportsData} fields={this.fields} placeholder="Select a game"  allowCustomValue={true} />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // define the JSON of data
    const sportsData = [
        { id: 'game1', sports: 'Badminton' },
        { id: 'game2', sports: 'Football' },
        { id: 'game3', sports: 'Tennis' }
    ];
    // maps the appropriate column to fields property
    const fields = { text: 'sports', value: 'id' };
    return (
    // specifies the tag for render the MultiSelect component
    <MultiSelectComponent id="mtselement" dataSource={sportsData} fields={fields} placeholder="Select a game" allowCustomValue={true}/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {

    // define the JSON of data
    const sportsData: { [key: string]: Object }[] = [
        { id: 'game1', sports: 'Badminton' },
        { id: 'game2', sports: 'Football' },
        { id: 'game3', sports: 'Tennis' }
    ];

    // maps the appropriate column to fields property
    const fields: object = { text: 'sports', value: 'id' };

    return (
    // specifies the tag for render the MultiSelect component
        <MultiSelectComponent id="mtselement" dataSource={sportsData} fields={fields} placeholder="Select a game"  allowCustomValue={true} />
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

See Also