Adding third party library to Salesforce LWC

Question

I'm trying to create an address search component using Dawa Address library (Danish Addresses) https://dawadocs.dataforsyningen.dk/dok/guide/autocomplete#trin-2-installer-dawa-autocomplete2-komponenten

This is my js code

import corejs from "@salesforce/resourceUrl/corejs";
import dawaFetch from "@salesforce/resourceUrl/dawaFetch";
import dawaAutocomplete from "@salesforce/resourceUrl/dawaAutocomplete";
import dawaStyles from "@salesforce/resourceUrl/dawaStyles";

import { LightningElement } from "lwc";
import { loadScript, loadStyle } from "lightning/platformResourceLoader";

export default class DawaAddress extends LightningElement {
  hasRendered = false;
  isLoading = false;

  renderedCallback() {
    if (this.hasRendered) {
      return;
    }
    this.hasRendered = true;
    this.isLoading = true;
    
    Promise.all([
      loadScript(this, dawaAutocomplete + '/dawa.js'),
      loadScript(this, corejs + '/core.js'),
      loadScript(this, dawaFetch + '/fetch.js'),
      loadStyle(this, dawaStyles)
    ])
      .then(() => {
        this.initAddress();
        this.isLoading = false;
      })
      .catch((err) => {
        console.error("Error = ", err);
        console.log(err);
      });

  }

  initAddress() {
    const addressElm = this.template.querySelector("input");
    console.log("addresselm = ", addressElm);
    if (addressElm) {
      dawaAutocomplete.dawaAutocomplete(addressElm, {
        select: function (selected) {
          console.log("Valgt adresse: " + selected.tekst);
        }
      });
      addressElm.blur();
      // eslint-disable-next-line @lwc/lwc/no-async-operation
      setTimeout(() => {
        addressElm.focus();
      }, 100);
    } else {
      console.error("No input element found");
    }
  }
}

and this is my template code

<template>
    <div class="autocomplete-container">
      <div class='autocomplete-container'>
        <input type="text" id="adresse">
      </div>
        <!-- Suggestions will appear here -->
    </div>
</template>

When I type in the front end, it throws this error

Uncaught TypeError: d.default.dawaAutocomplete is not a function throws at

Any suggestions how to fix it?

Thanks

Answer 1

You won't be able to use this on lightning-input at all, because the dawa library needs to manipulate an HTMLInputElement, which is protected by the Shadow DOM in LWC. If you want SLDS styling but still have this work, you'll have to adapt the Input blueprint and then load the script, having it attach to the native input instead. I'm not sure what it's supposed to look like when it's done, but I did manage a simple example, which I'll link below.

Demo.