lightning:input size is dynamically expanding for custom error message

Question

I have issue with the lightning:input size. The maxlength is 5 and everything looks good. But when I set the custom validation error in my JS with the error message "CVV2 attempt failed. Please try again or select another token", The size of the input text box is expanding to the lenght of error message.

<lightning:layoutItem size="" padding="horizontal-small">
    <lightning:input type="text" label="CVV2" maxlength="5" id="cvv2Id".../>
</lightning:layoutItem>

<lightning:layoutItem size="" padding="horizontal-small" >
    <lightning:input type="text" label="Exp. Date" maxlength="5".../>
</lightning:layoutItem>

  showInvalidCVVMessage: function(component, event,helper){
     ...........
     var v = component.find("cvv2Id");
     v.setCustomValidity("CVV2 attempt failed. Please try again or select another token");
     v.reportValidity();
  }

Answer 1

You need to specify aura:id and not just id.

In lightning (aura/lwc), the ids are modified at runtime. In aura, you need aura:id to identify using component.find

<lightning:input type="text" label="CVV2" maxlength="5" aura:id="cvv2Id" />