No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Popover inside search tag blocks ability to type

    Help
    2
    3
    327
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • H
      Humboldt155 last edited by

      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

      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by

        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.

        H 1 Reply Last reply Reply Quote 1
        • H
          Humboldt155 @rstoenescu last edited by

          @rstoenescu It works, thank you!)

          1 Reply Last reply Reply Quote 0
          • First post
            Last post