简体   繁体   English

React-Select 1.0.0-rc.5-选择选项后在内部单击时,Select不会打开

[英]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). 我从react-select库中以最新版本(1.0.0-rc.5)实现了Select组件。

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. 我尝试通过使用autoBlur = {true}道具来解决此问题,但无法在IE 11中切换到页面上的下一个元素。

I did notice that this doesn't happen on the demo page, which still uses version 0.9.1. 我确实注意到在演示页面上没有发生这种情况,该页面仍使用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. 选择一个选项时,我的输入的最小宽度设置为95%。

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. 这将导致在尝试单击下拉列表内部时输入event.target.tagName,这将导致代码在激发任何焦点事件之前返回。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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