Missing styles somehow

[Dorian Marié]

(I looked through the checklist)

Plugin version

23.3.2

Steps to reproduce

1. @import url("intl-tel-input/build/css/intlTelInput"); in css/application.tailwind.css
2. this stimulus controller

import { Controller } from "@hotwired/stimulus";
import intlTelInput from "intl-tel-input";
import utilsScript from "intl-tel-input/build/js/utils";
import I18n from "i18n";
import { VALID_CLASSES, INVALID_CLASSES } from "constants";

const t = I18n("phone_number");
const DEFAULT_COUNTRY_CODE = window.constants.DEFAULT_COUNTRY_CODE;
const ERRORS = {
  0: t("is_possible"),
  1: t("invalid_country_code"),
  2: t("too_short"),
  3: t("too_long"),
  4: t("is_possible_local_only"),
  5: t("invalid_length"),
  "-99": t("invalid_phone_number"),
};

export default class extends Controller {
  static targets = ["input", "error", "hidden"];

  connect() {
    this.iti = intlTelInput(this.inputTarget, {
      utilsScript: utilsScript,
      initialCountry: "auto",
      geoIpLookup: async function (success) {
        try {
          const response = await fetch("/country_codes", {
            method: "POST",
            headers: { Accept: "application/json" },
          });
          const json = await response.json();
          success(json.country_code || DEFAULT_COUNTRY_CODE);
        } catch {
          success(DEFAULT_COUNTRY_CODE);
        }
      },
    });
  }

  disconnect() {
    this.iti = null;
  }

  input() {
    this.hiddenTarget.value = this.iti.getNumber();

    if (this.inputTarget.value.trim() || !this.inputTarget.required) {
      if (this.iti.isValidNumber()) {
        this.errorTarget.innerText = "";
        this.inputTarget.classList.add(...VALID_CLASSES);
        this.inputTarget.classList.remove(...INVALID_CLASSES);
      } else {
        this.errorTarget.innerText = ERRORS[this.iti.getValidationError()];
        this.inputTarget.classList.add(...INVALID_CLASSES);
        this.inputTarget.classList.remove(...VALID_CLASSES);
      }
    } else {
      this.errorTarget.innerText = t("not_present");
      this.inputTarget.classList.add(...INVALID_CLASSES);
      this.inputTarget.classList.remove(...VALID_CLASSES);
    }
  }
}

4. this html in slim:

    .not-prose(data-controller="phone-number")
      = f.hidden_field field, data: { phone_number_target: "hidden" }, value: value
      = telephone_field_tag "#{field}_national", "", class: "w-full", autocomplete: autocomplete, data: { phone_number_target: "input", action: "phone-number#input countrychange->phone-number#input #{action}", **data }, value: value, required: required
      .text-red-600(data-phone-number-target="error")

Expected behaviour

Displays correctly

Actual behaviour

The two inputs stack

Initialisation options

    this.iti = intlTelInput(this.inputTarget, {
      utilsScript: utilsScript,
      initialCountry: "auto",
      geoIpLookup: async function (success) {
        try {
          const response = await fetch("/country_codes", {
            method: "POST",
            headers: { Accept: "application/json" },
          });
          const json = await response.json();
          success(json.country_code || DEFAULT_COUNTRY_CODE);
        } catch {
          success(DEFAULT_COUNTRY_CODE);
        }
      },
    });

[Dorian Marié]

I got the styles in my css

[Dorian Marié]

I have the dropdown working

[Dorian Marié]

broke with https://github.com/jackocnr/intl-tel-input/releases/tag/v21.0.0

v20.3.0 works fine

[Jack O'Connor]

Are you sure you're using the same version of the plugin JS and CSS?

Otherwise, this must just be your own custom CSS clashing with the plugin CSS. Do you have a live demo I can play with?

[Dorian Marié]

You are right I was using an outdated version of the JS (because I was vendoring it for importmaps)

I upgraded the JS to the latest version.

I use tailwind with typography but I use "not-prose".

The code is at https://github.com/dorianmariecom/code

The live website is at https://code.dorianmarie.com

Screen.Recording.2024-07-15.at.09.21.40.mov

I will push the latest version as soon as possible, I have some deployment issues

[Dorian Marié]

Fixed! I forgot to upgrade the CSS, I changed the dependency to "*" but forgot to yarn upgrade.

Thanks a lot for the help <3