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
    Commented Jul 5, 2017 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
    Commented Jul 5, 2017 at 8:53

2 Answers 2

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
    Commented Jul 6, 2017 at 7:01
  • FYI: onclick of upload button, standard salesforce error is displayed using validity attribute.
    – Sarang
    Commented Jul 6, 2017 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
    Commented Jul 5, 2017 at 9:52

You must log in to answer this question.

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