React-select: focusedOption jumps when selecting options after disabling closeOnSelect and removeSelected

[fedde-s]

I configured the Select component to accept multiple values (multi={true}),
to stay open when a value is selected (closeOnSelect={false}), and to keep
selected values listed (removeSelected={false}). When I now select an element
in the dropdown, the component tells its menuRenderer= function to highlight
an adjacent element as the { focusedOption }, until the mouse moves by any
further amount.

The reason I want to keep selected options listed in an open menu is that I'm
using a custom optionComponent= that visually indicates whether it's presently
selected. The focus jumping away from the mouse in this scenario made a buggy
impression on all users I showed it to so far.

Demo

This Plunker should illustrate the suprising behaviour:
https://plnkr.co/edit/qMnBup1tUnTYeqrEdIFQ?p=preview

[schinizel]

+1 ...Enter key also results in the same weird behavior, which is more unexpected. IMO the focused option should not be changed unless the up/down arrows (or mouse click) are used.

[fedde-s]

Also, it does not happen when deselecting an item, and it actually jumps in the opposite direction if the selection being added is the last one. I think this behaviour only makes sense in the removeSelected={true} scenario.