Input selects portion I didn't click because of text transform

[nickvleeuwen]

I posted an issue, see https://github.com/Vuepic/vue-datepicker/issues/782, but it still works a bit odd.

@Jasenkoo, Thanks for the update, it still works a bit off tho, especially when used with a different format for the text-input and normal display.

When I click the input it transforms the display format to the text-input format, then selects the text to the left of the position I clicked. But since I clicked before the transform it is hard to know what is going to selected since I can't see the transformed text. My preference would be always to select all text. That way I can just always click anywhere in the input and start typing.

Originally posted by @nickvleeuwen in https://github.com/Vuepic/vue-datepicker/issues/782#issuecomment-2017816945

[Jasenkoo]

@nickvleeuwen I don't see what is the odd behavior

https://github.com/Vuepic/vue-datepicker/assets/23171105/03ec91ae-29f1-4b23-9061-460c5e9c7c4d

[nickvleeuwen]

The date picker from my pov is at the bottom of this post.

I updated vuepic/vue-datepicker to 8.4.0 I use chrome, my version is: 123.0.6312.124

My full datepicker component code is

<template>
    <VueDatePicker
        @update:model-value="valueChanged"
        :week-numbers="{ type: 'iso' }"
        auto-apply
        v-model="date"
        :enable-time-picker="false"
        :format="format"
        :text-input="{
            selectOnFocus: true,
            format: 'dd-MM-yyyy',
        }"
        :min-date="min"
        :max-date="max"
        :clearable="clearable"
    />
</template>

<script setup>
    import { ref } from 'vue';
    import moment from 'moment'

    const props = defineProps({
        modelValue: String,
        max: Number,
        min: Number,
        clearable: {
            default: true,
            type: Boolean
        }
    });
    const emit = defineEmits(['update:modelValue', 'input']);

    const date = ref(props.modelValue);

    const valueChanged = function(modelData) {
        const value = modelData ? moment(modelData).format('YYYY-MM-DD') : null;

        emit('update:modelValue', value);
        emit('input', value);
    }

    const format = function(date) {
        return moment(date).format('[W]W | DD-MM-YYYY');
    }
</script>

And I instantiate the DatePicker component in the clip as <DatePicker @input="getPurchases" v-model="purchaseFilters.till"></DatePicker>

Am I doing something wrong maybe?

https://github.com/Vuepic/vue-datepicker/assets/6236168/d837208c-3b3c-4a60-8bc5-2c8ef2c1a5c1

[Jasenkoo]

Tried on Mac OS too to see if it is mac Mac-related issue, looks like you are slightly dragging a mouse when you click, I am not sure if you are using a trackpad or not, but that is causing the section to move.