Hi Garrett,

The other way to deal with this situation is to create a CSS class (.d-none {display: none !important; }) to toggle the display and then use that class on the tab header item with a required conditional flag (showTab). Further, you can change the flag (showTab = True/False) with client action and tab item could be toggled.

Simple CSS trick could do the job.

Hope this helps!

Hi Garrett,

I have created a sample app to show the implementation which is not breaking or misbehaving with the Outsystems design and approach.

You can do whatever you want to on the client action and there is no need to re-write the default actions as well.

I understand your concern with !important, so I have used OS provided "hidden" class and you can write style with more CSS specificity in case "hidden" is getting overridden by any other custom style.

Check the demo here - Tabs Demo

Hi @Garrett Nygren ,

please update your JS with below JS, 

function _setTabHeaderItemDisabledStatus(childHeaderId, isDisabled) {

    const _tabHeaderItemElement = document.getElementById(childHeaderId);

    const _tabContentItemElement = document.querySelector(`[data-block="Navigation.TabContentItem"][data-tab-id="${childHeaderId}"]`);

    if (_tabHeaderItemElement && _tabContentItemElement) {

        if (isDisabled) {

            // Store the original display style

            _tabContentItemElement.setAttribute('data-original-display', _tabContentItemElement.style.display || 'inline');

            // Add a class to hide the element

            _tabContentItemElement.classList.add('tab-content-item-hidden');

        } else {

            // Remove the class to show the element

            _tabContentItemElement.classList.remove('tab-content-item-hidden');

            // Restore the original display style

            const originalDisplay = _tabContentItemElement.getAttribute('data-original-display');

            _tabContentItemElement.style.display = originalDisplay;

            _tabContentItemElement.removeAttribute('data-original-display');

        }

    }

}

and use CSS as 

.tab-content-item-hidden {    display: none !important; } 

with this JS will update when to hide and when not to.

Hope this helps,

Thanks,

Adarsh Patel

@Garrett Nygren ,

I can repeat the same, it is not even about inline vs block, there is a rule in the OutSystems css that normally makes it display:content, but after disabling and enabling, that is overridden by an inline style of block.

before :

after : 

I'm thinking that this code is an oversight, if they are working with inline styles, it should just remove the display:none inline at the point of enabling.

Dorine

PS : a tip : The product owner of OutSystems UI, @Gonçalo Martins , is really good at following up on the forum if anything comes up relating to his products.  But for him to see it, you have to link your post to the OutsystemsUI forge asset.  

I have just done that for you, now.

Hello @Garrett Nygren 

This will be fixed on the next version under the task ROU-10913 for reference in the release notes.

Cheers,
GM