When countrySearch: false, and you search for a country it does not scroll to it

[Nedimko123]

When countrySearch: false, and you search for a country it does not scroll to it

[jackocnr]

Thanks for reporting. Fix released in v19.2.7.

[Nedimko123]

@jackocnr Alright, what the hell, that fix was so fast, thanks

[Nedimko123]

For example the version:

import { component$, useSignal, useStore, useStyles$, useVisibleTask$ } from '@builder.io/qwik'

export default component$(() => {
    useVisibleTask$(() => {
        var input = document.querySelector('#phone')
        window.intlTelInput(input, {
            utilsScript: 'https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js',
            formatOnDisplay: true,
            countrySearch: false,
        })
    })
    return (
        <>
            <input type="text" id="phone" class="bg-gray-700 text-white" />

            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css" />
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js"></script>
        </>
    )
})

Has the working search but It does not format the numbers, so what can I do?

[Nedimko123]

Version 19.1.0 is when I notice that it does format the number on input

[Nedimko123]

Since we decided to use the older version, it looked prettier but it didn't support autoFormatting we did the formatting oninput:

   onInput$={async (_, inputField) => {
                        const number = iti.value?.getNumber() as string
                        if (isFullString(number) && number.length > 1) {
                            const currentFormat =
                                number[0] === '+' ? intlTelInputUtils.numberFormat.INTERNATIONAL : intlTelInputUtils.numberFormat.NATIONAL
                            const formattedNumber = intlTelInputUtils.formatNumber(number, '', currentFormat)
                            iti.value?.setNumber(formattedNumber)
                            props.state[props.id] = formattedNumber
                        }

                        await validateInputField(inputField)
                    }}