+ Start a Discussion
Ertyq MrskErtyq Mrsk 

<lightning-input> in Salesforce LWC page not displaying expected result in Lightning UI

I have a Salesforce LWC page with currency symbol dropdown list and a text field. Whole idea is that whenever user leaves the text input field (onblur), text field will be formatted to a currency format (ex. From 500 to $500.00).

By the way, this is related to my previous post: Text Field Not Formatted in Currency When Selecting Currency Symbol from Dropdown List (https://developer.salesforce.com/forums/ForumsMain?id=9062I000000QzBJQA0) The main showstopper here is the Lightning error that occurs, but I already got rid of it. I also checked the browser's console log and finally getting the expected result.

But there's another issue I am encountering, which is the reason why I decided to create another post. Formatted text is not displaying on the text field, despite the expected result being returned in the console log. It just plainly displays the unformatted value (ex. 500).

I attempted to do following workarounds, but nothing works:

1. I tried putting {formattedString} between <lightning-input> and </lightning-input> tags and omitted the inner value attribute, it does not work.
<lightning-input label="Text Field"
                   type="text"
                   onblur={handleTextFieldChange}>
  {formattedString}
  </lightning-input>
2. I created another number field Number_Field__c and use <lightning-formatted-number> and use it instead of the current Text_Field__c. But upon checking, number field does not even display on the layout, even though field is visible to me as a System Administrator. I think this has got to do with the standard multicurrency functionality being disabled in my org. I intentionally left it disabled as this has limitations in custom objects and will affect my future implementations. Still, it does not work.

customDropDownLWC.js
<!--portion of html template-->

<lightning-combobox label="Currency" 
      name="Currency" 
      onchange={handleCurrencyDropDownChange} 
      options={currencyValues} 
      placeholder="--None--" 
      value={custObj.Currency__c}>
</lightning-combobox>

<lightning-formatted-number 
      value={custObj.Number_Field__c}
      format-style="currency"
      currency-code="USD"
      currency-display-as="symbol"
      onchange={handleNumberFieldChange}>
</lightning-formatted-number>
customDropDownLWC.html​​​​​​​
//portion of js file

handleNumberFieldChange(event) {

   this.custObj.Number_Field__c = event.target.value;
   const currencySelected = this.custObj.Currency__c; 
   console.log('Currency Selected' + currencySelected);

   if(currencySelected === '$') {
     console.log('Number Field' + this.custObj.Number_Field__c);
   }

   //same goes with other currency symbols....
}
Meanwhile, I put the original code as last resort, since it displays the expected result in the console log.

Here are the current codes:

customDropDownLWC.js​​​​​​​
//portion of js file

@wire(getPicklistValuesByRecordType, { objectApiName: CUSTOM_OBJECT, recordTypeId: '$objectInfo.data.defaultRecordTypeId'})
currencyPicklistValues({error, data}) {
    if(data) {
        this.error = null;
    
        let currencyOptions = [{label:'--None--', value:'--None--'}];
   
   
        data.picklistFieldValues.Currency__c.values.forEach(key => {
            currencyOptions.push({
                label : key.label,
                value: key.value
            })
        });

        this.currencyValues = currencyOptions;

    }

    else if(error) {
        this.error = JSON.stringify(error);
    }
}


handleCurrencyDropDownChange(event) {

    this.custObj.Currency__c = event.target.value;
    this.selectedCurrency = this.custObj.Currency__c;

}

handleTextFieldChange(event) {

    this.custObj.Text_Field__c = event.target.value;
    const currencySelected = this.custObj.Currency__c; 
    console.log('Currency Selected' + currencySelected);

    if(currencySelected === '$') {

        let formattedString;

        console.log('Text Field' + this.custObj.Text_Field__c);

        let valueInt = parseInt(this.custObj.Text_Field__c, 10);

        formattedString = '$' + valueInt.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
            
        console.log('Formatted Text Field' + formattedString);
            
    }

    //same goes with other currency symbols....

}
customDropDownLWC.html​​​​​​​
<!--portion of html template-->

<lightning-combobox label="Currency" 
    name="Currency" 
    onchange={handleCurrencyDropDownChange} 
    options={currencyValues} 
    placeholder="--None--" 
    value={custObj.Currency__c}>
</lightning-combobox>

<lightning-input label="Text Field"
    type="text"
    value={formattedString}
    onblur={handleTextFieldChange}>
</lightning-input>
This is getting frustrating. Please let me know if you have more ideas or workarounds for this scenario.​​​​​​​