Popover inside search tag blocks ability to type



  • Hello!

    I want popover appear under search area when search area is selected.
    It appears as it should, but it blocks the ability to type anything in the input block.
    May you suggest any way to solve it?

        <q-search
          label="StartSearch"
          color="secondary"
          clearable
          v-model="searchModel"
          :debounce="600"
          placeholder="Placeholder"
          icon="fas fa-search"
        >
          <q-popover>
              <div class="group" style="width: 100%; text-align: center;">
                Fast options:
                <br>
                  <q-btn outline color="teal" label="One"></q-btn>
                  <q-btn outline color="teal" label="Two"></q-btn>
                  <q-btn outline color="teal" label="Three"></q-btn>
                <br>
              </div>
            </q-popover>
        </q-search>
    

    0_1532820958987_73ddaee9-4652-41c6-909b-f2c4b75543b0-image.png


  • Admin

    This is part of the Accessibility work. Use no-focus Boolean prop on the QPopover. By default, for accessibility purposes, Popover focuses its content when it gets displayed, so user can use keyboard to engage with the popover. For use-cases when you need to keep focus on your current element (which in your case is the QSearch), set no-focus to true.



  • @rstoenescu It works, thank you!)