Focus in both select and button.ms-choice / Not opening on one occasion

[isaporto]

Steps to reproduce

1) Focus issue

Using TAB to navigate through interactive elements I was testing keyboard accessibility and see that the focus goes in both select and the button .ms-choice. I kinda fixed in my private project by adding tabindex -1 to the select itself and onAfterCreate I set tabIndex of the button for 0. It works, noice, but I just want to warn, because I didn't find something about change the structure some how, any initializer to save efforts by doing in JS.

2) Not opening

From the page with the multiple-select input go to another path, then click at the previous button from the navigator and try to open the multiple select input.

Expected behaviour

1) To focus only in the button.ms-choice when passing through the multiple-select 2) Open the input normally

Actual behaviour

1) The focus using tab goes in both select and button .ms-choice 2) Following the steps to reproduce the issue, the input load the multiple-select content but when I click nothing happens.

My browser's development console output does not contain errors

Tested solutions

1) I kinda fixed in my private project by adding tabindex -1 to the select itself and onAfterCreate I set tabIndex of the button for 0. It works, noice, but I just want to warn, because I didn't find something about change the structure in the site or any initializer to save efforts by doing in JS. 2) I thought that maybe the problem was that I am using multicollapse from bootstrap and the multipleSelect fuction was being called before the content is loaded, but I changed to be display flex in the start, then I tried to fire the multipleSelect after DOMContentLoaded and after document.readyState == "complete" but the issue keeps happening.

System configuration

Ruby: '2.7.2' Rails: '6.0.3.4' Bootstrap version: 4.5.3 multiple-select: 1.5.2 stimulus: 1.1.1

Code snippet

I didn't know how to use jfiddle, sorry, so I created a simple repository https://github.com/isaporto/input_tests

Additional JavaScript Libraries*

I am using JS framework Stimulus so all JS it's in the input_controller.js

[andi-b]

This seems to be the code that causes the select to close when using arrow keys. I can't determine the difference between mouse click and using arrow keys with the object passed as e being similar.