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



  • 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?



  • @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



  • verygood


Log in to reply