function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Kevin Zhou 13Kevin Zhou 13 

Input sometimes disappears

I'm using the built-in input validation feature. When an invalid input is entered and the user clicks outside the input box, sometimes that input disappears; the associated error message does not get displayed. I'd prefer the invalid input to remain in the input box. What might cause the input to sometimes disappear?
SwethaSwetha (Salesforce Developers) 
Hi Kevin,
Can you share more details about the built-in input validation feature? Can you share the click path of steps to repro?
Kevin Zhou 13Kevin Zhou 13
Here's my html file:

<lightning-input type="date" data-my-id="myDate"
    class="inttDate inputDateField slds-size_8-of-12 slds-m-top_xxx-small" name="myDate"
    min="2022-01-01" max="2022-12-31" message-when-range-overflow="Invalid input: overflow"
    message-when-range-underflow="Invalid input: underflow" variant="label-hidden"
    value={myDate} onchange={myDateChange}
    message-when-bad-input="Invalid input: general">
</lightning-input>



Here's my js file:

myDateChange(event) {
    let inputDate = this.template.querySelector("lightning-input[data-my-id= myDate]");
    if (inputDate.value) {
        this.myDate = event.target.value;
    }      
    else {
        this.prodRequestCompletionDate = getConstants().EMPTY; // this sometimes causes input to disappear
    }
    inputDate.reportValidity();
}



const getConstants = () => {
    return {
        EMPTY : '',
        FILLED : 'Filled'
    }
}
Vinay MVinay M

Hi Kevin Zhou 13,

  Looks like you are trying to modify the field value when there is a value in it.
  if (inputDate.value) {
        this.myDate = event.target.value;
    }    

I suggest to just to the validation and dont modify the field value. Please refer to the code below:

 

let inputDate = this.template.querySelector("lightning-input[data-my-id= 'myDate']");
if (!inputDate.value) {
        inputDate.setCustomValidity('Enter your error message here');
}  else {
        inputDate.setCustomValidity('');  //This will clear the error message.
}
inputDate.reportValidity();


Thank you,

Vinay.