16
Views
2
Comments
Solved
[OutSystems UI] DropdownSearch keybaord accessibility not working
OutSystems UI
Forge asset by OutSystems
Application Type
Reactive

Hello friends

Keyboard accessibility for the DropdownSearch widget seems to have broken after the latest release of Outsystems UI (2.24.0). Has anyone else experienced this?

The problem I’m facing:

Once focus reaches "vscomp-clear-button" via the tab key it never leaves - pressing tab again has no effect. the only way I can move focus along to the next input is by first pressing the return key but that, of course, clears the dropdown value which I don't want to do. EnableAccessibilityFeatures is set to TRUE.


Keyboard accessibility is a legal requirement in some regions so we can't release without it.

I'm confident that this is a bug in Outsystems UI (2.24.0) because if I roll back my sandbox application to the previous version it works just fine.


Any help would be greatly appreciated. Thank you.

UserImage.jpg
Richard Ward
Solution

Outsystems have confirmed this issue and have advised the following work around...

Add this JS to the screen's OnReady event:

(function patchDropdownTabTrap() {  const SEL = '.vscomp-ele-wrapper[role="combobox"]';  document.addEventListener(    'keydown',    function (e) {      if (e.key !== 'Tab') return;      const wrapper = e.target && e.target.closest && e.target.closest(SEL);      if (!wrapper) return;      const isOpen = wrapper.getAttribute('aria-expanded') === 'true';      if (!isOpen) {        e.stopImmediatePropagation();       }    },    true  );})();

2025-09-25 14-38-22
Lokesh Kumar Yadav

Yes, it’s a known issue in OutSystems UI 2.24.0 — the DropdownSearch widget’s keyboard accessibility is broken. The focus gets stuck on the clear button (vscomp-clear-button). Rolling back to 2.23.0 or earlier temporarily fixes it. You can also report it to OutSystems Support — it’s likely to be patched in the next release.

UserImage.jpg
Richard Ward
Solution

Outsystems have confirmed this issue and have advised the following work around...

Add this JS to the screen's OnReady event:

(function patchDropdownTabTrap() {  const SEL = '.vscomp-ele-wrapper[role="combobox"]';  document.addEventListener(    'keydown',    function (e) {      if (e.key !== 'Tab') return;      const wrapper = e.target && e.target.closest && e.target.closest(SEL);      if (!wrapper) return;      const isOpen = wrapper.getAttribute('aria-expanded') === 'true';      if (!isOpen) {        e.stopImmediatePropagation();       }    },    true  );})();

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.