Is it possible to completely control v-menu state from model-value?

I have following code

<template>
  <v-menu>
    <template #activator="{ props }">
      <v-text-field v-bind="props" label="Choose an animal"></v-text-field>
    </template>
    <v-list>
      <v-list-item title="Cat"></v-list-item>
      <v-list-item title="Dog"></v-list-item>
      <!-- etc. -->
    </v-list>
  </v-menu>
</template>

I was wondering, is it possible to completely control v-menu state from model-value prop?

Why do I need it?

Because I'd like to disable following features:

I don't want it to close when I click outside of it.
I don't want it to open/close when I click on the text field.
I want to open it programmatically when the animal list (retrieved from a BE service) is receieved.

I checked the official documentation, but I didn't find anything useful. It could also be that the v-menu is not the proper component to achieve my goal.

Solution

There are props to do all these things listed in the VMenu API documentation

I don't want it to close when I click outside of it.

use persistent prop

I don't want it to open/close when I click on the text field.

set open-on-click prop to false

I want to open it programmatically when the animal list (retrieved from a BE service) is receieved.

use model-value and set to true to open programmatically

<v-menu
  :model-value="openMenu"
  persistent
  :open-on-click="false"
>

const openMenu = ref(false)
function apiCall() {
  api.get(...).then(() => { openMenu = true })
}

Additionally, there's a prop that works with persistent if you don't prefer the bounce animation that plays by default when clicking outside the persistent menu, which is no-click-animation. Feel free to add that one too if you prefer.