Utilizing intl-tel-input to store a user's full international number in the database has been successful. However, when attempting to display the phone number, it correctly removes the country code but does not select the appropriate country flag; instead, it defaults to the initialCountry value that was set.
For example: the stored phone number is saved in the database as +3553456546578 Yet, when displayed on the edit page, it appears as: retrieved from the database
The desired outcome is for it to display the correct flag, such as Albania in this case, with the number 3456546578. The value in the input field reads: value="+3553456546578"
Below is the current code being used:
HTML
<input type="tel" id="mobile_code" class="form-control" placeholder="{{ __('messages.phone') }}" name="phone" value="@if ($customer->phone != 'null') {{ $customer->phone }} @endif">
JS
const input = document.querySelector("#mobile_code");
var phone_number = window.intlTelInput(input, {
preferredCountries: ["us", "eg"],
initialCountry: "eg",
separateDialCode: true,
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.4/js/utils.js"
});