0

In my LWC form I have multiple lightning-tabs containing several lightning-input-fields. When the form is Approved I would like to allow Users to view, but lock all fields from edit.

Unfortunately disable is not supported for Tabs (here) so I thought I could used the disabled attribute on the lightning-input-fields.

I created a "handleDisable" event to query all fields and add the attribute and added this to a renderedCallback. This works fine for fields on the active tab, but is not does not disable fields on the inactive tabs.
I added the handleDisable event to the onactive on the tab. When the tab is initially clicked the fields are not disabled, but they are when you navigate back.

Below is the code from my simple test example and a gif.

Is there a way to update disabled attribute on the non-visible fields or have the tabs update on the initial view?

Also is there a better solution to lock these fields. I realize I could hide the elements, but Users need view Access. I could also create separate lightning-output-fields and show these when the form is Approved. However in my actual form there are a lot of fields.

JS

import {LightningElement, wire, track, api} from 'lwc';

export default class Test extends LightningElement {
    recordId='a02DR0000086WqLYAU';

    renderedCallback() {
        this.handleDisable();
    }

    handleDisable(){
        const inputFields = this.template.querySelectorAll('lightning-input-field');
        inputFields.forEach( field => {        
            field.disabled=true;
        });
    }
}

HTML

<template>
  <lightning-record-edit-form record-id={recordId} object-api-name="Match__c">
    <lightning-tabset  variant="scoped">
      <lightning-tab label="Tab 1" class="slds-p-horizontal_large">
        <lightning-input-field field-name="EmploymentStatus__c"></lightning-input-field>                                                                    
      </lightning-tab>
      <lightning-tab label="Tab 2" class="slds-p-horizontal_large" onactive={handleDisable}>
        <lightning-input-field field-name="InterestRationale__c"></lightning-input-field>
        <lightning-input-field field-name="ConcurrentProcesses__c"></lightning-input-field>       
      </lightning-tab>
    </lightning-tabset> 
  </lightning-record-edit-form>
</template>

enter image description here

1 Answer 1

1

Tabs are not loaded/rendered into the DOM until the first time they are displayed. What you can do, though, is have a property to disable the field, then set that property. It'll be set the first time the tab is loaded.

export default class Test extends LightningElement {
    recordId='a02DR0000086WqLYAU';
    fieldsDisabled = true;
}

...

<lightning-input-field disabled={fieldsDisabled} ...

Or, if they're always meant to be disabled, just say so!

<lightning-input-field disabled ...

For other use cases, for example, if you wanted to do some validation or something, and the DOM was the only way, you can wait a tick for the tab to render:

<lightning-tab onactive={handleTabActive} ...

...

async handleTabActive(event) {
  await Promise.resolve(); // Wait one life cycle
  const whatever = this.template.querySelectorAll('.something');
}

If you don't mind an eslint/lwc warning about using await in a loop, you can also just cycle all the tabs:

I'd recommend that you avoid this technique unless you absolutely feel you have no other choice, but it is indeed a choice you can make.

connectedCallback() {
  this.updateFields();
}
async updateFields() {
  await Promise.resolve();
  const tabSet = this.template.querySelector('lightning-tabset');
  const tabs = this.template.querySelectorAll('lightning-tab');
  [...tabs].forEach(
    async (tab) => {
      tabSet.activeTab = tab.name;
      await Promise.resolve();
    }
  );
}
1
  • Per usual thanks for the solution and education. I will go with you simple/obvious solution of using a variable to set the disabled attribute. I completely over thought this one :) Jan 27, 2023 at 19:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .