I implemented a multi-select ComboBox like shown in the DropDownBox docs. Using the control with the mouse works fine, but keyboard usage is suboptimal. Moving through the list and selecting items using the arrow keys and spacebar respectively work great, but additionally I'd like to be able to move to the next control in a form by pressing the tab key while the DropDown is open and focused once I'm done selecting items.
However, I can't manage to implement this behavior. I tried to listen for the onkeydown event on the ListBox, but the event is not fired when pressing tab. I assume this is because of the ListBox's own keyboard navigation capabilities. I also tried implementing a custom ItemDisplayTemplate for the ListBox and listening for the onkeydown event there, without success. The problem only arises when the ListBox is inside a DropDownBodyTemplate. What does work is first closing the DropDown using the Esc key first. I suspect this works because Esc also moves the focus from the ListBox in the DropDownBox' body to the DropDownBox control itself, where the tab key works correctly.
In the demo project attached below I've implemented the multi-select ComboBox and added the possibility of opening the dropdown via the down arrow key. To reproduce my problem, start the project, focus the browser window, press tab to focus the multi-select, press arrow down to open the dropdown and select some list items via arrow keys + spacebar. Now, when pressing tab, I'd like the button below the multi-select to be focussed, but it isn't. Instead, pressing Esc first is required.
Is there any workaround that enables me to skip pressing Esc? I'd like to be able to close the DropDown and move to the next control just by pressing tab.
Best regards,
Janik Neißl
Hi Janik,
The behavior you encountered appears to be expected. The built-in keyboard navigation mechanism keeps the focus locked inside the dropdown by design. I understand that changing the focus with TAB might be helpful in certain situations, so I reached out to our developers. We'll see if there is an alternative solution for your specific usage scenario. I will follow up with you once I have information to share.