Is it possible to open Quasar PopUpEdit by pressing Enter key, instead of clicking on it?

Though Quasar documentation mentions the show() event, in order to programatically open QPopUpEdit (instead of the default behaviour by clicking on it), but there is no any example. After researching it is suggested by others using a template ref, but for me, unfortunately it is not working.

I have tried with template ref, as follows, but it is not working. Can anybody help me to get closer to the solution?

<q-popup-edit v-slot="scope" auto-save ref="popUp">
    <q-input v-model="scope.value" autofocus/>
</q-popup-edit>


In script:

const popUp = ref()

const enterPressed = () => {
    popUp.show()  
}

Solution

Just use a button. See the playground.

Quasar seems to do it automatically. But you could also set button's click to @click="enterPressed"

Playground

const { createApp, ref } = Vue;

const app = createApp({
  setup () {  
    return { label: ref('Click me') }
  }
})

app.use(Quasar)
app.mount('#q-app')

a, label { line-height: 3; }

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="q-app">
      <a href="#focus" autofocus>Click here to focus.</a> Then press: <kbd>TAB</kbd>, <kbd>ENTER</kbd>
      <p>
        <button type="button" autofocus>PopUp</button><br/>
        <label>{{label}}</label>
        <q-popup-edit v-model="label" v-slot="scope" auto-save>
          <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set"/>
       </q-popup-edit>
       </p>
    </div>    
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.umd.prod.js"></script>
  </body>
</html>