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.
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.
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