Downshift: Keyboard selection is rudely interrupted and overridden by auto-complete mouse-enter actions.

[tannerlinsley]

• downshift version: 1.16.0
• node version: 8.5.0
• npm (or yarn) version: yarn 1.0.2

Description

In any downshift configuration (at least thus far in my experience), the mouse position will fire (and select whatever is underneath it) immediately after an arrow-selecting and shift-arrow-paging event.

Replication

1. Navigate to any example: http://downshift.netlify.com/?selectedKind=Examples&selectedStory=basic&full=0&down=1&left=1&panelRight=0
2. Open the menu by changing the input
3. Make sure there are multiple "pages" of options.
4. Place your cursor over the first option in the list
5. Using the down-arrow on your keyboard, navigate down the list
6. As soon as your arrow-down action selects an option beyond the visible set (either by arrowing-down on the last option, or shift-arrowing-down to change the whole page) the option underneath the cursor position will subsequently be selected.

Expected

I would expect the cursor to not activate an option while using arrow navigation, unless of course, the cursor is moved.

[tannerlinsley]

Code origin is easy to locate: https://github.com/paypal/downshift/blob/master/src/downshift.js#L637, but the solution to this problem could be more difficult than I thought.

[kentcdodds]

Yep, I've seen and experienced this before. Interestingly, Google avoids this problem and hides the cursor:

I think we could do something similar. I definitely welcome a pull request to improve this experience. I think that most folks would prefer this and others wouldn't notice if we changed this.

[kentcdodds]

As for a solution, I'm not 100% certain the best way to do it. Definitely open to ideas.

[tannerlinsley]

I'm curious if a mouse move event would fire in the same situation.

[tannerlinsley]

That would probably bring some debouncing or cancelling issues to mind, but theoretically would work. I feel there is a simpler solution though...

[philipyoungg]

@kentcdodds @tannerlinsley I'll look at this tonight! I'm also developing similar component for client work so let's see what I can do.

[philipyoungg]

After thinking for a while, I think this could work (theoretically). Here's how:

1. we need to add a new state. Let's call it isArrowButtonClicked for now.
2. on componentWillMount, add event listener that binds to onkeyup. If this.state.isOpen and key UP/DOWN is pressed, change this.state.isArrowButtonClicked to true.
3. Similarly, on componentWillMount, add event listener that binds to onmousemove. If this.state.isOpen and this.state.isArrowButtonClicked is true, then change it to false
4. Lastly, we only run the onMouseEnter event listener on item props if this.state.isArrowButtonClicked is true. https://github.com/paypal/downshift/blob/master/src/downshift.js#L637

Love to hear any improvement!

cc: @kentcdodds @tannerlinsley

[kentcdodds]

Thanks for the idea @philipyoungg,

I'm not sure I understand the purpose of the isArrowButtonClicked... Honestly this doesn't appear to have anything to do with whether you click the toggle button or if there's even a toggle button at all...

I think that it would be easier to see solutions to this than hear it explained. Anyone can feel free to open a PR. It may not get merged right away or at all depending on how complicated it is, but that will be much more likely to get merged if it's shown in a PR rather than explained in text :)

[philipyoungg]

@kentcdodds IsArrowButtonClicked is a state that monitors whether user pressed key up / key down while the dropdown is open.

The problem is mouse event fired when user choosing the dropdown item on arrow up / arrow down right?

The only responsibility of the state is to disable the Mouse event when the state is true.

The state will return to false as soon as user moves the Mouse.

[kentcdodds]

Hmmm... the isArrowButtonClicked name just isn't working for me.... But feel free to open a PR and we can talk about it there.

Also, I wonder whether pointer-events could help us here.

[cmmartin]

/s/isArrowButtonClicked/isArrowButtonPressed

Fingers don't click :)

[ibrahima]

My 2c, I think part of the naming confusion is because it's not an arrow button, but an arrow key. Button makes web developers think of <button> I think 😛.

isArrowKeyPressed?

[kentcdodds]

Thanks @ibrahima. Yes, I do like isArrowKeyPressed better :+1:

Still not sure I follow the suggested solution well, but a PR would help me understand I think.

[kentcdodds]

This was mistakenly closed.

[kentcdodds]

This was solved a while back. Forgot to close the issue.