MenuItem allows active state to leave focused element with potentially misleading selection

[evansjohnson]

Steps to reproduce

• https://blueprintjs.com/docs/#select/select-component
• open menu
• use arrow key to navigate a few items down
• press enter or space
• notice active item is selected
• reopen menu
• navigating down with tab key
• continue to navigate down using arrow key
• notice focus state and active state are on different elements
• press enter or spacebar to select
• focused item is selected not active item

Actual behavior

• there are two focus states making it hard for user to tell what will happen
• when navigating with tab, focus moves along with active element
• when navigating with arrows, focus state does not change

Expected behavior

• focus state should stay in line with what the menu thinks is the active state

Possible solution