简体   繁体   中英

React-Select 1.0.0-rc.5 - Select doesn't open when clicking inside after choosing an option

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM