Custom Values

The ComboBox supports the implementation of custom values.

By default, the ComboBox dismisses values that do not appear in the supplied list of items when the user presses Enter or when the component loses focus. To configure the ComboBox to accept custom values, set the allowCustom property to true.

Primitive Values

If the component is bound to primitive values, set the allowCustom property to true.

The following example demonstrates how to allow custom primitive values.

import React from 'react';
import ReactDOM from 'react-dom';

import { ComboBox } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sizes = [ "Small", "Medium", "Large" ];
    state = {
        value: 'Medium'
    };

    onChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {

        return (
            <div>
                <p>Custom values are <strong>enabled</strong>. Type a custom value.</p>
                <p>primitive data</p>
                <div className="example-wrapper">
                    <ComboBox
                        data={this.sizes}
                        value={this.state.value}
                        onChange={this.onChange}
                        allowCustom={true}
                    />
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Object Values

The following example demonstrates how to allow custom object values.

import React from 'react';
import ReactDOM from 'react-dom';

import { ComboBox } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sizes = [
        { id: 1, text: 'Small' },
        { id: 2, text: 'Medium' },
        { id: 3, text: 'Large' }
    ];
    state = {
        value: { id: 2, text: 'Medium' }
    };

    onChange = (event) => {
        let value = event.target.value;

        if (value && value.id === undefined) {
            value = {
                ...value,
                id: new Date().getTime()
            };
        }

        this.setState({
            value: value
        });
    }

    render() {
        return (
            <div>
                <p>Custom values are <strong>enabled</strong>. Type a custom value.</p>
                <p>ComboBox value: {JSON.stringify(this.state.value)}</p>
                <div className="example-wrapper">
                    <ComboBox
                        data={this.sizes}
                        textField="text"
                        dataItemKey="id"
                        value={this.state.value}
                        onChange={this.onChange}
                        allowCustom={true}
                    />
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
 /