Issue on disabling and enabling Tabs (fw-tabs)

[Anish]

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

[Santhosh (Santhosh Balusamy)]

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>
</fw-tabs>

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

Thanks

[Anish]

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

[Santhosh (Santhosh Balusamy)]

Can you please share the snippet which you are trying?

Thanks

[Anish]

Sure,

 <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-tabs>

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

[Anish]

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

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

[Santhosh (Santhosh Balusamy)]

@Anish,
Please find the sample fiddle for your reference

Edit fiddle - JSFiddle - Code Playground

     <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">
         desk
       </fw-tab-panel>
       <fw-tab-panel name="mandatory">
         mandatory
       </fw-tab-panel>
       <fw-tab-panel name="mappingRule">
         mapping rule
       </fw-tab-panel>
     </fw-tabs>


     <button id="enable" onclick="onbtnCLick()">
        enable
     </button>
     
     <button id="disable" onclick="ondisableClick()">
        disable
     </button>

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

[Anish]

Thanks a lot @Santhosh its working fine