Lightning input disabled depending on aura attribute

  • I have an lightning:input like this (already tried with not(v.customAddress)):

    <form class="slds-form--inline slds-m-bottom--small">
    
      <lightning:select
        aura:id="sendTo"
        label="{! $Label.c.Send_To }"
        name="{! $Label.c.Send_To }"
      >
        <option value="{! null }" selected="{! true }">{! 'Select a mail' }</option>
    
        <aura:iteration items="{! v.addresses }" var="address" >
          <option value="{! address.id }">
                  {! join(' ', join(', ',address.street, address.houseNumber), address.postalCode, address.city) }
          </option>
        </aura:iteration>
    
      </lightning:select>
      <lightning:buttonIcon
        name="Add selected address"
        iconName="utility:add"
        alternativeText="{! 'Select address' }"
        onclick="{! c.selectAddress }"
      />
    </form>
    
    <!-- STREET -->
    <form class="slds-form--inline slds-m-bottom--small">
        <lightning:input
            aura:id="street"
            type="text"
            label="{! 'Street address' }"
            name="{! 'street' }"
            onchange="{! c.updateAddress }"
            disabled="{! !v.customAddress }"
            value="{! v.address.street }"
            required="{! true }"
        />
    </form>
    

    An aura:attributelike this:

    <aura:attribute 
      name="customAddress"  
      type="Boolean"  
      default="true"  
      required="false" 
      access="private" 
    />
    

    And a Javascript function in my controller like this:

    ({
    
      selectAddress:      function(component, event, helper) {
        const input         = component.find('sendTo'); // A lightning:select
        const addressId     = input.get('v.value'); // The default lightning:option has a {! null } value
    
        if (addressId && addressId.trim() !== '') {
          component.set('v.address', /* myProcessedObject */);
          component.set('v.customAddress', false); // lightning:input has to be disabled
        } else {
          component.set('v.address', {});
          component.set('v.customAddress', true); // lightning:input has to be enabled
        }
    
      }
    
    })
    

    The first time my function is called AND component.set('v.customAddress', false); is reached, field is not disabled.

    Sometimes, when component.set('v.customAddress', true); is reached, the field is disabled.

    Example:

    Initial step: Step 1: initial state

    I selected the address in the dropdown and clicked + => lightning:inputis field and disabled OK Step 2: I selected the address in the dropdown and clicked +

    I selected the null value from the dropdown and clicked + => lightning:inputis cleaned but not enable NOK Step 3: I selected the null value in the dropdown and clicked +

    With a different behaviour of the click function:

      selectAddress:      function(component, event, helper) {
        const input         = component.find('sendTo');
        const addressId     = input.get('v.value');
    
        if (addressId && addressId.trim() !== '') {
          component.find("street").set("v.disabled", true);
        } else {
          component.find("street").set("v.disabled", false);
        }
    
      }
    

    Answering comment: https://salesforce.stackexchange.com/a/156171/37707:

    Default state

    Step one: (has to be disabled) Step one

    Step two: (has to be enabled) Step two

    I feel your question lacks input to reproduce the issue. Please add relevant code for eg:how selectAddress is invoked..

    `selectAdress` is invoked by cliking on a `lightning:button`. Nothing special except this function called to get the value by getting the component via its aura:id

    selectAddress is one such an example that is missing. The important point here is the lightning:select's whose value decides the which logic to execute in if/else; that is missing in the question. What type of options select deals with ? is it array of object or array of string(i.e address). How the data flows in the component?. If you could throws us an minimum code(copy past code) to reproduce the issue in our dev org, then will help us to track the issue down.

    Here's my understanding correct me if i'm am wrong. lightning:select is shown which displays addresses as options(list of string as addresses). After selecting the appropriate option, button is clicked to populate the lightning:input box based on the select's value. When none option is selected, the input box is emptied out and disabled. This is what I tired and it worked for me.

    I added more code details. @Praveen can you show me ? I don't understand what I did wrong

    Btw, `find().set('v.disabled', true)` show me this in the console: `WARNING: AttributeSet.set(): unable to override the value for 'disabled=function (cmp, fn) { return !(cmp.get("v.customAddress")); }'. FunctionCallValues declared in markup are constant.`

  • could you just try this one to disable and enable?

    Disable: component.find("street").set("v.disabled", true); 
    Enable: component.find("street").set("v.disabled", false); 
    

    Comments are not for extended discussion; this conversation has been moved to chat.

  • The following should work. (The readonly attribute behaves like the disabled attribute)

    <lightning:input
        aura:id="street"
        type="text"
        label="Street address"
        name="street"
        onchange="{!c.updateAddress}"
        readonly="{!not(v.customAddress)}"
        value="{!v.address.street}"
        required="true"
    />
    
  • I am not sure if it will work or not, but here is my suggestion:

    1. Remove the default="true" for the "customAddress" Boolean attribute (now the default value is false).
    2. According to above condition change 'disabled="{!v.customAddress }"' for lightning:input and do other changes if needed

    I faced an issue with default="true" so i am suggesting this.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM