[Vuejs]-Vuetify v-data-table header customization

Put a @click.stop on the v-text-field:

<template v-slot:header.calories="{ header }">
  <v-text-field label="search calories" @click.stop />
</template>

This will stop the click event from propagating into the header.