I am using intl-tel-input library for international phone number inputs. However I am only looking to allow users to select or change a country code but not enter a new phone number. So I am wondering how I can disable the phone number input but keep the countrycode dropdown

if I use the disable attribute on the input it does not allow country code selection. So this dropdown doesn't work when disable is used.

Ideally users wouldn't be able to even click into the input (except for the dropdown piece)

<div class="slds-var-p-top_xx-small">
  <input  type="tel" class="slds-input" data-id="contactPhoneInput" name="country" value={user.Contact.Phone}></input>
</div>

//Javascript

const TELINPUT = window.intlTelInput;
const INITIALCOUNTRY = "us";
const PREFERREDCOUNTRIES = ["us", "ca", "mx"];

createPhoneInput(TELINPUT, TYPE) {
        const INPUT = this.template.querySelector(`[data-id=${TYPE}Input]`);
        this.intlTele[TYPE] = TELINPUT(INPUT, {
            utilsScript: RESOURCE_utilsjs,
            initialCountry: INITIALCOUNTRY,
            preferredCountries: PREFERREDCOUNTRIES
        });
    }