tabs form problem

[maxxxweb]

Hi, I have a problem with a tabs form. When loading the page, if you click on a tab before the page has finished loading, some tabs will disappear.
Inspecting the code, the hidden tab has
element.style {
display: none;
}
What could it depend on?
Unfortunately my application is on the intranet

 

[beatty_t]

Have you checked the developer console in your browser to see if there is anything that might be happening? There is a js file called "require.js" that is requested after the form's html is rendered in your browser (near the bottom of the page) and it includes a lot of the js functionality that is used within the page. I'm wondering if the page hasn't completely loaded yet, would clicking on a tab cause an error (because the event listener that would handle the action of clicking the tab hasn't loaded yet) and stop the rest of the js from being able to load (resulting in more tabs and functionality within the page being affected)?

If I'm not mistaken, the class "active" gets added to the <button> element of a tab that is clicked on AND the <div> tag associated to the same group that the button element is associated to (if the button element's id is something like group12_tab, there should be a div element with an id of group12_tab_content rendered in the browser and this div gets the class "active" added to it too via the function that runs as part of the js event listener waiting for users to click on the tab buttons).

The rest of the tabs (without the class "active" being present) will have the display property set to "none" to keep them hidden simply because they have the class "tab-pane" associated to them), while the current "active" tab is displayed. In Chrome's developer console, you can see this in the Styles tab if you click on one of the tabs:

.tab-content > .active {
    display: block;
}
.tab-content > .tab-pane {
    display: none;
}

Depending on whether I understand your question properly. Another possible issue could be that all the js required has rendered within the browser (isn't within the require.js file), but the div element associated to the group that the tab button is going to try and set the class to "active" for, is going to generate a "not found" error in js if it hasn't been rendered yet.

 

[troester]

The issue is replicatable if you click on the tabs before loading is completed.
No idea why it adds display:none on the tabs.

We already have a blockuserinput.js which covers the action buttons.
Maybe it can be extended for the tabs.

 

[achartier]

The blockuserinput was original set up to stop all input, but someone wanted their users to be able to do somethings so we changed it. I don't rmember the specifics, but may be we need an option for this?

 

[beatty_t]

The issue is replicatable if you click on the tabs before loading is completed.
No idea why it adds display:none on the tabs.

We already have a blockuserinput.js which covers the action buttons.
Maybe it can be extended for the tabs.

I checked one of my forms from the administrator section and found that the css display property is set to "none" in the default "administrator" template (atum) and the default "site" template (cassiopeia). The CSS file for atum is here: [root]/media/template/administrator/atum/css/template.css (within lines 4122 -> 4128). The CSS file for cassiopeia is here: [root]/media/template/site/cassiopeia/css/template.css (within lines 3982 -> 3988).

Just my opinion, but to mitigate ux/ui issues for users, I think the blockuserinput js script should apply to all (Fabrik related) objects (and perhaps alert a user if they click on a tab (or any other Fabrik object) before the page content has finished loading - similar to how you can't save a Fabrik form if the page hasn't completely loaded), just as "achartier" explained how it was originally setup.

I'm not sure if this would work, but if someone wanted to setup a custom event listener for the tabs buttons that ran outside of the blockuserinput script, could they do this within a custom "form" js file or would the blockuserinput js script apply to it too (to accommodate a need by someone to override the blockuserinput script for an object like a tab)?

 

[troester]

Setting .tabs-content to display:none (as done in Cassiopeia/atum in the lines you mention) is not the problem, it's hiding the content, this is correct.

But if you are clicking on the tabs before loading is finished some JS is adding style="display:none" to (some of) the heading tabs (nav-link buttons), which doesn't make sense at all.

You can try
https://bitbucket.org/fabrikar/fabrik/branch/blockuserinput
(Set Fabrik Options/Debugging to DebugJS to run the uncompressed JS file)