Need an Input box inside react-select option dropdown

Question

I am in a situation where I need an input box inside my dropdown option menu. The scenario is that, I need to create a new option with the dropdown but I am not allowed to use the custom tag creator feature of react select.

I found in the docs that we can pass a custom option renderer component and I passed the same and when I tried to put an input box inside my option component the I can't get the control of my input box.

The attached picture shows the input inside my option but when I click on the input box I am not getting the control over it.

My DeleteComponent.tsx ->

import { showDeleteConcernModal } from '../../../actions/modalActions';
import { deleteConcernType } from '../../../actions/summaryActions';
import { ISelectOptions } from '../../../interfaces';
import * as React from 'react';
import { FormControl } from 'react-bootstrap';

export interface IDeleteOptionsProps {
    className?: string;
    isDisabled?: boolean;
    isFocused?: boolean;
    isSelected?: boolean;
    onFocus?: Function;
    onSelect?: Function;
    option?: ISelectOptions;
}

export class DeleteOptions extends React.PureComponent<IDeleteOptionsProps, {}> {
    constructor() {
        super();
    }

    handleMouseDown = (event) => {
        event.preventDefault();
        this.props.onSelect(this.props.option, event);
    }

    handleMouseEnter = (event) => {
        event.preventDefault();
        this.props.onFocus(this.props.option, event);
    }

    handleMouseMove = (event) => {
        event.preventDefault();
        this.props.onFocus(this.props.option, event);
    }

    handleOptionDelete = (value) => {
        showDeleteConcernModal('oi-form', value);
    }

    handleChange = (event) => {
        console.log('>> event.target.value', event.target.value);
    }

    render() {
        return (
            <div className={this.props.className}
                onMouseEnter={this.handleMouseEnter}
                onMouseMove={this.handleMouseMove}
            >
                <div style={{ textAlign: 'left', width: '80%', display: 'inline-block' }}>
                    <FormControl
                        type="text"
                        onChange={this.handleChange}
                    />
                </div>
                <div
                    onMouseDown={() => { this.handleOptionDelete(this.props.children); }}
                    className="delete-option"
                    style={{ textAlign: 'right', width: '20%', display: 'inline-block' }}
                >
                    <i className="fa fa-times" aria-hidden="true"></i>
                </div>
            </div>
        );
    }
}

Answer 1

Do you need to allow new options to be created if they do not already exist Right?

If yes then try this: https://github.com/JedWatson/react-select

The Creatable component enables users to create new tags within react-select. It decorates a Select and so it supports all of the default properties (eg single/multi mode, filtering, etc) in addition to a couple of custom ones (shown below). The easiest way to use it is like so:

import { Creatable } from 'react-select';

function render (selectProps) {
  return <Creatable {...selectProps} />;
};

Demo: Your suitable solution is custom tag creation from https://jedwatson.github.io/react-select/