QInput is not accessible when using q-electron-drag in QToolbar in Electron mode

[anidotnet]

I am trying to build the layout for my electron app as follows:

<template>
  <q-layout view="hHh lpR fFf">
    <q-header class="bg-dark text-white q-electron-drag">
      <q-toolbar>
        <q-btn no-caps no-wrap flat stretch label="File" :ripple="false">
          <q-menu auto-close
                  transition-show="jump-down"
                  transition-hide="jump-up">
            <q-list style="min-width: 200px">
              <q-item clickable>
                <q-item-section>New tab</q-item-section>
              </q-item>
              <q-item clickable>
                <q-item-section>New incognito tab</q-item-section>
              </q-item>
              <q-separator />
              <q-item clickable>
                <q-item-section>Recent tabs</q-item-section>
              </q-item>
              <q-item clickable>
                <q-item-section>History</q-item-section>
              </q-item>
              <q-item clickable>
                <q-item-section>Downloads</q-item-section>
              </q-item>
              <q-separator />
              <q-item clickable>
                <q-item-section>Settings</q-item-section>
              </q-item>
              <q-separator />
              <q-item clickable>
                <q-item-section>Help &amp; Feedback</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>

        <q-btn no-caps no-wrap stretch flat label="Edit" :ripple="false">
          <q-menu auto-close
                  transition-show="jump-down"
                  transition-hide="jump-up">
            <q-list style="min-width: 200px">
              <q-item clickable>
                <q-item-section>New tab</q-item-section>
              </q-item>
              <q-item clickable>
                <q-item-section>New incognito tab</q-item-section>
              </q-item>
              <q-separator />
              <q-item clickable>
                <q-item-section>Recent tabs</q-item-section>
              </q-item>
              <q-item clickable>
                <q-item-section>History</q-item-section>
              </q-item>
              <q-item clickable>
                <q-item-section>Downloads</q-item-section>
              </q-item>
              <q-separator />
              <q-item clickable>
                <q-item-section>Settings</q-item-section>
              </q-item>
              <q-separator />
              <q-item clickable>
                <q-item-section>Help &amp; Feedback</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
        <q-space />
        <q-input dark dense standout v-model="text">
          <template v-slot:append>
            <q-icon v-if="text === ''" name="search" />
            <q-icon v-else name="clear" class="cursor-pointer" @click="text = ''" />
          </template>
        </q-input>
        <q-space />

        <q-btn dense flat icon="minimize" @click="minimize" />
        <q-btn dense flat icon="crop_square" @click="maximize" />
        <q-btn dense flat icon="close" @click="closeApp" />
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view/>
    </q-page-container>
  </q-layout>
</template>

The problem I am facing with the q-input element placed in toolbar. It is not accessible when q-electron-drag is enabled in header. Is there any way I can make q-input accessible in my design?

[metalsadman]

@anidotnet from the docs

Should you want to add exceptions to any children of the element having q-electron-drag class, you can attach the q-electron-drag–exception CSS class to them.

https://quasar.dev/quasar-cli/developing-electron-apps/frameless-electron-window#Handling-window-dragging

[yeganesorani]

verygood