1

I am having this strange issue in Firefox that on load of my component, the following field is automatically bordered red without performing any action as: enter image description here

The border goes away when I enter something, or hide and then show the modal. It occurs only on first load of component.

The issue is not there in any other browsers, only in Firefox.

Markup:

<lightning:layoutItem class="slds-p-around--medium" size="12" largeDeviceSize="6" mediumDeviceSize="6" smallDeviceSize="6">
      <lightning:input aura:id="fieldId"
                 required="true"
                 label="File Name"
                 name="filename"
                 value="{!v.attachmentNameValue}"/>
    </lightning:layoutItem>

Conroller for controlling required fields called only on click of a button:

areAllFieldsValid : function(component, helper){
        var isValid= true;

        var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && !inputCmp.get('v.validity').valueMissing;
        }, true);
        if (!allValid)
            isValid = false;

        return isValid;
    },

EDITED .css:

.THIS .slds-input{ 
    box-shadow:initial;
}

New Border:

enter image description here

2
  • when is the areAllFieldsValid function called? – POZ Jul 5 '17 at 7:51
  • @POZ: This is called only on click of a button. Mentioned it just to show how I am validating required fields. My case occurs on load of component. – Sarang Jul 5 '17 at 8:53
1

I see the same issue with my custom input component. I think the required attribute in the input field is responsible.

You can solve the problem with css

https://stackoverflow.com/questions/5939341/firefox-4-is-there-a-way-to-remove-the-red-border-in-a-required-form-input

2
  • I have added the styling in above code. This solved the problem of red border going away but on click of upload button, the border width has got thin as shown in attachment. Do you have any solution for this? I tried removing "slds-input" class javascript, but that did not work. – Sarang Jul 6 '17 at 7:01
  • FYI: onclick of upload button, standard salesforce error is displayed using validity attribute. – Sarang Jul 6 '17 at 9:40
0

Few browsers like Firefox giving focus to a certain input field by default. Focus will automatically out if you use any other input text above lightning:input Ex:

<lightning:layoutItem class="slds-p-around--medium" size="12" largeDeviceSize="6" mediumDeviceSize="6" smallDeviceSize="6">
   <input type="text" name="fname"/>
   <lightning:input aura:id="fieldId"
                 required="true"
                 label="File Name"
                 name="filename"
                 value="{!v.attachmentNameValue}"/>
</lightning:layoutItem>

Actually this is not the problem with lightning:input the issue is because of browser default behavior.

1
  • This is not working for me :( – Sarang Jul 5 '17 at 9:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.