Using the Tabs widget, I cannot put any elements inside the Title section of the TabsItemHeader unless it is pure text (with no styling). The issue I encounter if I do is that click on that element does not correctly navigate to the tab, it results in an empty tab being displayed. Inspecting the html I see that with plain unstyled text, the tabheaderitem is the only html element, with the text being the inner html. If I put anything else in that results in a div or span (placing a container then text, or styling the text) this results in the tab no longer functioning, unless I specifically click on the padding area around the text, aka click on the actual tabheaderitem element instead.
I am assuming this is because the click event isn't getting the correct data-tab index from the sub element, since it doesn't have one. Surely this can't be intentional and has to be a bug, we require additional content in the tab header title for formatting and badges/numbers etc.
Hi @Alexander Stump,
Thank you for the report, we created an issue on our backlog to look into it (ROU-4127) and it should be available on the next OutSystems UI Web release!
As for a possible quick workaround (not fully tested), I believe the following CSS snippet would do the trick:
.tabs-header-item > * {
pointer-events: none;
}
Best regards,
Bernardo Cardoso
Thank you for the temporary fix, I had never heard of this CSS rule before, and it appears working for me.
After just a minute of investigating the javascript, I found the issue. The script captures the target element, and gets the tab-index from that. The issue is that it doesn't grab the actual tabs-header-item element, instead grabbing whatever sub element you clicked on (a div or span etc). Specifically it's this line of code that is the issue:
var clickedTabDataInfo = target.getAttribute('data-tab');
All they had to do to prevent this was add ".closest('.tabs-header-item')" to grab the correct element. I am really hoping that OS is just using an old out dated script that's cached, because I cannot fathom how such a basic issue could be shipped out.
The solution is to manually add the "data-tab" attribute to any element within the tabs-header-item title placeholder, since this will then get the correct value captured on the click event. What an extremely silly issue to come across, hopefully OS can implement the ultra basic fix outlined above.
Currently no solution, other that to ensure the content is plain text so it renders out as the inner HTML to the tabs header item. The culprit here is that when you click on the item, it attempts to set the target element to be the active tab, so if the text element is its own span element then the tabs header item never gets set
Really annoying that this is an issue. This script needs to be updated to get the target.closest('.tabs-header-item') and it would work with any number of child elements in the header item.