I found an issue in Reactive Web where if you click anywhere in the Tab Content and then use the arrow keys left and right on your keyboard, it will navigate to the other tabs, but the Tab Header is still locked on to the current tab.
If you click on the Tab Header and then click the left and right arrow keys, then it works normally (Tab Header moves with Tab Content). But the moment you click on the Tab Content, then use the left and right arrow keys.. the content moves but not the header.
Is there a way to prevent the mismatch of Tab Content with the Tab Header from happening?
Hi Danpob,
Thank you for the feedback.We added this to the backlog under the code ROU-3850 and we'll fix it on a future release (no ETA at this time).
Not sure what is your use case, but if you need to prevent this behaviour, you can use the Event.preventDefault() method in the OnReady event with a JS node (see attached file).
Something like this:
let tabContent = document.querySelector(".osui-tabs__content");
tabContent.addEventListener("keydown", function(e) {
if(e.code === "ArrowLeft" || e.code === "ArrowRight")
e.preventDefault();
});
Best regards,
Giuliana.
The workaround does not help when a widget is located on the tab, such as DataGrid Reactive. When the focus is on DataGrid, arrow keys will change tabs rather than navigate on cells.We are looking for another workaround but no luck at the moment...
Hi,
Danpob, this sounds more like a bug, for that I added the OutSystemsUI forge component to your question.
Regards,
Daniel
I think you can do a workaround to let javascript to click on the tab header when u click on the arrow
Hope this help
Shingo Lam
I have been facing this issue .. looking around for sometime i got to know there is outsystem inbuild action which can be used to achieve the scenario for this
@Giuliana Silva the workaround doesn't work. not being able to disable the arrow keys greatly impact the usability of the Tab UI when there is an input or text editor inside the tab content. Would really appreciate either disable the arrow keys or provide a way to disable the arrow keys.
Hi All!
I was also facing this issue until OutSystems recently released a new UI (version 2.15) that solves it.
Just tested it in my personal environment and it's working like a charm!
https://vhmata.outsystemscloud.com/tabsmgt/tabs2
Regards
Vitor
Hi Vitor,
It seems you have solved, can you help me with sharing the OML?
Vasudevan
@Vasudevan Natesan Please read the comments more carefully.This is fixed in OutSystems UI version 2.15.0 out-of-the-box and, if you can't upgrade it you have already a module in the answer marked as the solution with a workaround.