score:4

Accepted answer
'default' | 'multiple' | 'tags' | 'combobox'

score:0

import React from 'react';
import {Select} from "antd";

class FieldSelectAndCustomText extends React.Component {
    constructor(props) {
        super(props);
        this.initialTitles = ["something", "else"];
        this.state = {
            titles: this.initialTitles,
            currentValue: null,
        };
    }
    handleSearch = (value) => {
        const titles = this.state.titles;
        for (let i = 0; i < titles.length; i++) {
            const isSearchValueInState = new RegExp(value).test(titles[i]);
            if (!isSearchValueInState) {
                this.setState({
                    titles: [...this.initialTitles, value],
                    currentValue: value
                });
                break;
            }
        }
    };

    handleChange = (value) => {
        this.setState(prev => ({...prev, currentValue: value}));
    }

    render () {
        return (
            <div>
                <Select
                    showSearch
                    value={this.state.currentValue}
                    filterOption={true}
                    onSearch={this.handleSearch}
                    onChange={this.handleChange}
                    onFocus={this.handleFocus}
                    style={{ width: "100%" }}>
                    {this.state.titles.map((title) => (
                        <Select.Option value={title} key={title}>{title}</Select.Option>
                    ))}
                </Select>
            </div>
        );
    }

}

score:4

protected handleSearch = (value: string) => {
    this.setState({ titles: value && value !== "" ? [...this.titles, value] : fileTitles });
};

protected handleFocus = () => {
    this.setState({ this.titles });
};

Related Query

More Query from same tag