I implemented the Select component from the react-select library with the latest version (1.0.0-rc.5).
I am able to click in the Select element to open the list. I choose a value, which closes the list and displays the value I selected. However, when I click the element again to display the list of options, nothing happens. It will only open the list after I click away (probably after the blur event).
I tried working around this issue by using the autoBlur={true} prop, but I can't tab to the next element on the page in IE 11.
I did notice that this doesn't happen on the demo page, which still uses version 0.9.1.
Anyone know why this is happening?
EDIT
This is a sample of my class
export class TestSelect extends React.Component {
constructor(props) {
super(props);
}
updateValue = (selectedItem) => {
this.setState({ selectValue: selectedItem });
if (this.props.onChange) {
this.props.onChange(selectedItem);
}
}
render() {
return (
<div id={this.props.id} className="form-styling">
<Label text="React Select" />
<br/><br />
<Select
options={this.props.options}
className="select-class"
clearable={false}
onChange={this.updateValue}
/>
</div>
);
}
}
This is the page that implements the class
const TestPage = () =>{
return(
<TestSelect
id="select-id"
options={testSelectOptions}
/>);
}
export const testSelectOptions = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
];
export default TestPage;
I figured it out. My input had a min-width set to 95% when an option was selected.
This causes the event.target.tagName to be INPUT when trying to click inside the dropdown, which causes the code to return before any focus events are fired.
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.