0

I'm new to LWC and trying to create a simple LWC component with input field. I have loaded 3rd party zip folder in Static Resource which contain JS and CSS file.

Scenario - If user types street name into input field then I want to populate address suggestion using 3rd party JS library.

Currently I'm not able to populate below is the screenshot.

enter image description here

Below is the screenshot of component what I'm expecting output using 3rd party JS.

enter image description here

Below is the code in LWC

<template>
    <div class="slds-p-around_medium">
        <label class="slds-form-element__label">Street Address</label>
        <input id="streetAddress" name="streetAddress" class="slds-input" type="text" lwc:dom="manual" placeholder="Address Search" value={postalCodeFieldValue}/>
    </div>
</template>

JS

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import addresscompleteResource from '@salesforce/resourceUrl/addresscomplete';
export default class VS_PostalCode extends LightningElement {

    postalCodeFieldValue='';
    jsInitialized=false;

    connectedCallback() {
        console.log("connectedCallbac1");
        if (this.jsInitialized) {
            return;
        }
        this.jsInitialized = true;
        Promise.all([
            loadStyle(this, addresscompleteResource + '/addresscomplete.css'),
            loadScript(this, addresscompleteResource + '/addresscomplete.js')
        ])
            .then(() => {
                this.callAddressCompleteJS();
            });

    }
    callAddressCompleteJS() {
        var fields = [
            { element: "streetAddress", field: "Line1" }
        ],
            options = {
                key: "UE16-PK48-CT42-MD73"
            },
            control = new pca.Address(fields, options);
        control.listen("populate", function (address) {
            alert(JSON.stringify(address));
        });
    }
}
4
  • What problem you are facing? – Rahul Gawale May 27 '20 at 6:42
  • I'm not able to populate street address in input field using 3rd party JS, let me edit question – Chetan Nandre May 27 '20 at 6:44
  • Did you get any error? – Rahul Gawale May 27 '20 at 7:06
  • In browser console, I'm not able to see any error but I feel there is issue with LWC Locker service which is blocking DOM modification. – Chetan Nandre May 27 '20 at 8:04
1

The script can't find the element by Id, so it won't know which element to attach to. At minimum, you need to dynamically grab the Id:

const fields = [
  { element: this.template.querySelector('input[name=streetAddress]').id, field: 'Line1' }
];

This is required because the ID values are generated dynamically during runtime, so you can't possibly predict the ID ahead of time. I checked the documentation, it doesn't seem to allow simply passing in an element, which would be ideal, so this is the next best solution.

Alternatively, consider just using their API and writing your own UI; this may be more efficient in terms of ease of use, although this appears to be a metered API, so I can't speak for its cost.

5
  • This answer points to how you need to triage these sorts of errors; use your browser's JavaScript debugger to see what's happening as you step through the code, and to examine the DOM to make sure it looks like what you expect. – Phil W May 27 '20 at 7:53
  • Hi @sfdcfox I tried your code but still no luck. I think there is issue with LWC locker service. What you say? – Chetan Nandre May 27 '20 at 7:55
  • @ChetanNandre I don't have enough information to tell. I would need the error message(s) you're seeing to provide more information. This appears to be a simple script, though I didn't download it to verify (requires registration?). I only provided an answer based on available information. If you're getting problems at this point, it's probably because you didn't set the CSP. We can give you better answers if we knew what errors you got? – sfdcfox May 27 '20 at 8:06
  • @sfdcfox I have added URL into CSP and I tried using Aura Component and working fine. In browser console, I'm not able to see any error but I feel there is issue with LWC Locker service which is blocking DOM modification – Chetan Nandre May 27 '20 at 9:09
  • @ChetanNandre Locker Service is the same between Aura and LWC. If it works in Aura, it should work in LWC. – sfdcfox May 27 '20 at 14:17

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.