Android webview, select opens and immediately closes

This was brought to our attention when a user was using react-select through Facebooks in app browser. I’ve managed to replicate the issue on Android 4.3 using webview. Works great everywhere else, but many users accessing links via Facebook, this could be an issue.

Basic config:

<Select
        ref='input'
        name={this.props.name}
        onChange={this.onChange.bind(this)}
        onFocus={this.onFocus.bind(this)}
        options={this.props.options}
        asyncOptions={this.asyncOptions}
        disabled={this.props.disabled}
        value={this.props.value}
        placeholder={this.props.placeholder}
        optionRenderer={(option) => {
          return (<div className={classes.ungroupedItem}>{option.label}</div>);
        }}
        searchable={false}
        clearable={false}
        cache={{}}
      />

If I edit lib/Select.js within the package directly and modify handleMouseDownOnArrow, handleMouseDownOnMenu and handleMouseDown and add the touchend event :

if (this.props.disabled || [‘mousedown’, ‘touchend’].indexOf(event.type) !== -1 && event.button !== 0) {return;}

This works.

Any thoughts on how to achieve this without modifying the package? I add onOpen and OnClose props and with on touch on the <Select>, both these functions were triggered.

Thanks

[aditkpt]

I tried a workaround for this issue by triggering the focus to Select component from another element and overlapping it precisely on top of the actual Select component.

First, I needed to bind the Select component using ref and then make a function to focus on the Select and to control the menu with menuIsOpen props:

constructor() {
    super();
    this.inputRef = React.createRef();
    this.state = {
        openMenu: false
    };
}

focusInput = () => {
    const { openMenu } = this.state;
    if (openMenu) {
        return;
    } else {
        this.setState({
            openMenu: true
        });
        this.inputRef.current.focus();
    }
};

As for the layout, I wrapped the Select component with a div, and then I added child element before Select component and also passing openMenu state into menuIsOpen props; that would look like this:

<div>
    <div className="react-select__hidden-input">
        <input
            type="text"
            onClick={this.focusInput}
            />
    </div>
    <Select
        ref={this.inputRef}
        menuIsOpen={openMenu}
        onBlur={() => {
            this.setState({
                openMenu: false
            });
        }}/>
</div>

In this case, I used text input because the Select component would work if I click on a regular html text input first before focusing/clicking on Select. For the hidden input styling, since it needs to be overlapping the Select component, the css would be:

.react-select__hidden-input {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    opacity: 0;
}

I would like the text input that triggers the focus on Select component to not get in the way of the UI while still being on top of the actual Select, hence why I set the opacity to 0.

I hope this would help.

[lukebennett88]

Hi @yocokirk,

In an effort to sustain the react-select project going forward, we’re cleaning up and closing old issues and pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren’t using the latest version of react-select please consider upgrading to see if it resolves any issues you’re having.

However, if you feel this issue is still relevant and you’d like us to review it - please leave a comment and we’ll do our best to get back to you!