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>
);
}
}
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.