How to prevent time picker overlay for custom trigger?

[jc1231]

I have a custom input text box acting as the trigger and have code to clear the value but can't figure out how to prevent the time picker overlay from showing when clicking the clear button.

<template>
    <VueDatePicker v-model="time" @update:model-value="handleTime" :range="isRange" time-picker :teleport="true"
        :is24="false">
        <template #trigger="{ value }">
            {{ value }}
            <InputComponent :model-value="timeRangeFormatter()" :icon="icon" place-holder="Select Times"
                :is-required="isRequired" :is-disabled="true" :clearable="true" @onClear="clearValue" />
        </template>
    </VueDatePicker>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import InputComponent from '@/components/controls/InputComponent.vue'
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
import moment from 'moment';

const props = defineProps({
    startTime: { type: String },
    endTime: { type: String },
    icon: { type: String, default: "mdi-clock-outline" },
    isRequired: { type: Boolean, default: false },
    isRange: { type: Boolean, default: false }
});

const emits = defineEmits(['update:startTime', 'update:endTime']);
const time = ref();

watch([() => props.startTime, () => props.endTime], ([newStartTime, newEndTime]) => {
    const startTime = newStartTime ?? '00:00:00';
    const endTime = newEndTime ?? '00:00:00';

    time.value = [
        {
            hours: parseInt(startTime.split(':')[0]),
            minutes: parseInt(startTime.split(':')[1])
        },
        {
            hours: parseInt(endTime.split(':')[0]),
            minutes: parseInt(endTime.split(':')[1])
        }
    ];
});

const handleTime = (modelDate: [any, any]) => {
    const [start, end] = modelDate;

    emits('update:startTime', moment(start).format('HH:mm:00'));
    emits('update:endTime', moment(end).format('HH:mm:00'));
};

const timeRangeFormatter = (): string => {
    if (props.startTime == null || props.startTime === "") {
        return "";
    }

    if (props.endTime == null || props.endTime === "") {
        return moment(props.startTime, "HH:mm:ss").format("h:mm A");
    }

    return `${moment(props.startTime, "HH:mm:ss").format("h:mm A")} - ${moment(props.endTime, "HH:mm:ss").format("h:mm A")}`;
};

const clearValue = () => {
    emits('update:startTime', '');
    emits('update:endTime', '');
};

</script>

[Jasenkoo]

You need to add stop.prevent on onClear event