ive made two gifs showing what happens on desktop and mobile. ive got a seach field where a user can search through a database of plants. once they start typing it shows the closest results right away. then the user can click on which plant they want to tag on their post. this works as it should on desktop. https://imgur.com/sk7TpJd

whereas on mobile. the user starts typing into the tag search field and the results do not show up untill the mobile keyboard is minimized. id like the results to display as it does on desktop.

this is what it does on mobile. https://imgur.com/vpwROu3

is there some option i need to enable in the html input field for this work? or some other setting im not familar with? im building this in VUEJS with firestore as my backend. here is the basic HTML and JS that is making this work currently.

 <input
          type="search"
          class="searchBox"
          @keydown.enter.prevent=""
          @keydown.space.prevent=""
          v-model="search"
          name="addSearch"
          placeholder="tag a plant"
          autocomplete="off"
          maxlength="35"
        />
      </div>
      <div v-if="search">
        <div
          class="results"
          v-for="plant in searchMatch"
          :key="plant.id"
          @click="
            (tag = plant.plantName), (showOverlay = true), (search = '')
          "
        >
          <h3>{{ plant.plantName }}</h3>
        </div>
      </div>

const { documents } = getCollection("plants");

const searchMatch = computed(() => {
  return documents.value.filter((plant) => {
    return plant.plantName
      .toLowerCase()
      .includes(search.value.toLowerCase());
  });
});