Option under mouse is focused when scrolling with ArrowUp/Down

Replicate by clicking the first select on the demo page, putting your mouse cursor over the first option, and pressing ArrowDown. When you get to the bottom of the visible window and ArrowDown once more, the window scrolls causing the mouseEnter handler to fire on the top option and focus goes from Tasmania (which just scrolled into view) back up to the top option.

They way I’ve seen this handled is to keep a flag that tells whether or not the user is using the keyboard on the component, and then check it in the mouseEnter handler. Would look something like this:

var ex = {
    usingKeyboardOn: function() {
        if (this.usingKeyboard) { return; }
        document.removeEventListener("keydown", this.usingKeyboardOn, true);
        document.addEventListener("wheel", this.usingKeyboardOff, true);
        document.addEventListener("mousemove", this.usingKeyboardOff, true);
        this.usingKeyboard = true;
    },
    usingKeyboardOff: function() {
        if (!this.usingKeyboard) { return; }
        document.addEventListener("keydown", this.usingKeyboardOn, true);
        document.removeEventListener("wheel", this.usingKeyboardOff, true);
        document.removeEventListener("mousemove", this.usingKeyboardOff, true);
        this.usingKeyboard = false;
    },
    handleMouseEnter: function(op) {
        if (!this.usingKeyboard) { this.focusOption(op); }
    },
}

[hikeeba]

Is there any update on this? We are seeing this issue as well and it would be nice to get a solution in without having to work around it.

[geraldodev]

@FossiFoo,

It’s not completed. I got multi selection and simple selection implemented. Simple-value and Async are not implemented. I have not decided yet to open, because different from @JedWatson I have no authority over the code. I’m porting (a lot of work) and I’m gaining confidence and getting to know the design.

regards, geraldodev

2016-10-19 3:42 GMT-02:00 FossiFoo [e-mail]:

@geraldodev https://github.com/geraldodev ah, very cool. will you release that? i’ve been looking to do that too, but it was never high enough prio for me.

The suggested fix LGTM as well.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/JedWatson/react-select/issues/48#issuecomment-254715596, or mute the thread https://github.com/notifications/unsubscribe-auth/AAvRCEIUY2dqBlukGnCTO3abNFrImOi4ks5q1a2vgaJpZM4DTkif .