Issue on disabling and enabling Tabs (fw-tabs)

Hello team,

Am using Tabs (fw-tabs) from crayons version 3.
Am disabling the tab using,
document.querySelector("#tab2").setAttribute(“disabled”, “true”);
The tab gets disabled it’s working fine.

After when I try to enable the tab by using
document.querySelector("#tab2").setAttribute(“disabled”, “false”);
Here am unable to enable the tab and it returns a null value with an error message.

TypeError: Cannot read properties of null (reading ‘setAttribute’)

Are there any possible ways to overcome this issue? @Communiteq

Hi @Anish,

Can you try with the below snippet?

<fw-tabs id="personal">
  <fw-tab slot="tab" panel="personal">Personal</fw-tab>
  <fw-tab slot="tab" panel="official">Official</fw-tab>

document.getElementById('personal').firstChild.setAttribute('disabled', true); 
document.getElementById('personal').firstChild.setAttribute('disabled', false); 

FYI: if you specify Id in <fw-tab> it won’t work.

Hope this will work :slight_smile:


Hi @Santhosh ,

In my case, I need to disable and enable the <fw-tab> based on some actions.
I can disable it but am unable to enable it., as you can see it in the below image.

And also tried your approach it throws an error which is mentioned below.

TypeError: document.getElementById(…).firstChild.setAttribute is not a function

Can you please share the snippet which you are trying?



 <fw-tabs id="settingsPage">
        <fw-tab slot="tab" id="tab1" panel="freshdesk"
          >Freshdesk configuration</fw-tab
        <fw-tab slot="tab" id="tab2" panel="mandatory"
          >Mandatory Fields Configuration</fw-tab
        <fw-tab slot="tab" id="tab3" panel="mappingRule"
          >Mapping Rule Configuration</fw-tab

  document.getElementById("settingsPage").firstChild.setAttribute("disabled", true);

@Santhosh ,
Is this a right way, or need to change.

If its right can you help me out to fix this.

Please find the sample fiddle for your reference

     <fw-tabs id="settingsPage">
       <fw-tab slot="tab" id="tab1" panel="freshdesk">Freshdesk configuration</fw-tab>
       <fw-tab slot="tab" id="tab2" panel="mandatory">Mandatory Fields Configuration</fw-tab>
       <fw-tab slot="tab" id="tab3" panel="mappingRule">Mapping Rule Configuration</fw-tab>
       <fw-tab-panel name="freshdesk">
       <fw-tab-panel name="mandatory">
       <fw-tab-panel name="mappingRule">
         mapping rule

     <button id="enable" onclick="onbtnCLick()">
     <button id="disable" onclick="ondisableClick()">
function onbtnCLick() {
document.getElementById("settingsPage").querySelector('fw-tab[panel="freshdesk"]').setAttribute("disabled", false);  

function ondisableClick() {
document.getElementById("settingsPage").querySelector('fw-tab[panel="freshdesk"]').setAttribute("disabled", true);  

kindly let me know if it works.



Thanks a lot @Santhosh its working fine :innocent:

1 Like

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.