question: performance and fixed menu width

Expected Behavior

Country select stays the same size & loads quickly

Actual Behavior

Scrolling resizes the country select. It's also incredibly slow and lags considerably.

Steps to Reproduce the Problem

init-vuetify.js

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, fa } from 'vuetify/iconsets/fa'
import { VDateInput } from 'vuetify/labs/VDateInput'
import 'flag-icons/css/flag-icons.min.css';
import 'v-phone-input/dist/v-phone-input.css';
import { createVPhoneInput } from 'v-phone-input';

export function initVuetify(app) {
    const vuetify = createVuetify({
        components: {
            ...components,
            VDateInput,
        },
        directives,
        icons: {
            defaultSet: 'fa',
            aliases,
            sets: {
                fa,
            },
        },
        date: {
            locale: {
                en: 'en-GB',
            },
        },
    });
    app.use(vuetify);

    const vPhoneInput = createVPhoneInput({
        countryIconMode: 'svg',
    });

    app.use(vPhoneInput);
}

create-account.vue

<template>
    <v-form validate-on="submit lazy" @submit.prevent="submit" ref="createAccountForm">
        <v-phone-input
            :rules="[rules.required]"
            validate-on="blur"
            v-model="user.cellNumber" />
    </v-form>

</template>
<script src="./create-account.js"></script>

create-account.js

const CreateAccount = {
    name: 'create-account',
    data: function() {
        return {
            user: {
                cellNumber: null,
            },
            rules: {
                required: value => !!value || 'Required.',
            }

        };
    },
    methods: {
        async submit(e) {
            const { valid } = await this.$refs.createAccountForm.validate();

            if(!valid)
                return;

        }
    }
}

export default CreateAccount;

Specifications

OS: Windows 10
Browser: Brave
Browser version: Brave v 1.67.119 Chromium: 126.0.6478.114
Package version: 4.2.1
Vuetify version: 3.6.10

Hello @P1kkewyn, thank you for this issue. Here are answers to your questions. Feel free to open another issue if needed.

1. Performance

Country select performance is something related to Vuetify, which I cannot improve on my side... A good approach with this is to only display the countries you need if possible, instead of displaying the whole list. As an example, I'm using include-countries prop to limit the list (this will only display given countries):

<v-phone-input :include-countries="['FR', 'BE']" />

2. Menu width

To set a custom fixed width for countries menu, you can provide your own menuProps using countryProps property:

<v-phone-input :country-props="{ menuProps: { width: 300 } }" />

This is not done by default by this lib to keep default Vuetify behavior.

paul-thebaud / v-phone-input