How to make a Vue 3 classlist toggle button that opens dropdown menu in any iOS device?

Question

I created a simple dropdown menu using DaisyUI in Vue3. A simple button toggling classes doesn't open dropdown menu in any iOS device. Works perfect everywhere else.

<script setup>

import { ref } from "vue";

const mobileMenu = ref(false);

const toggleMobileMenu = () => {
  mobileMenu.value = !mobileMenu.value;
};

</script>

<template>
<!--Mobile dropdown menu-->
      <div class="dropdown md:hidden lg:hidden xl:hidden 2xl:hidden">
        <button class="btn btn-primary btn-xs" @click="toggleMobileMenu">
          <HomeIcon class="h-2 w-2 icon" />
          {{ $t("header.navigation.menu") }}
        </button>
        <ul
          @click="toggleMobileMenu"
          :class="[mobileMenu ? 'absolute' : 'hidden']"
          class="dropdown-content menu-vertical mr-5 mt-5 p-2 overflow-y-scroll shadow bg-base-100 rounded-box w-fit"
        >
          <li>
            <a
              ><RouterLink to="/"
                ><button class="btn btn-primary btn-xs my-2 mr-5">
                  <HomeIcon class="h-2 w-2 icon" />
                  {{ $t("header.navigation.home") }}
                </button></RouterLink
              ></a
            >
          </li>
          <li>
            <a
              ><RouterLink to="/art"
                ><button class="btn btn-primary btn-xs my-2 mr-5">
                  <PaintBrushIcon class="h-2 w-2 icon" />
                  {{ $t("header.navigation.art") }}
                </button></RouterLink
              ></a
            >
          </li>
          <li>
            <a
              ><RouterLink to="/photos"
                ><button class="btn btn-primary btn-xs my-2 mr-5">
                  <BeakerIcon class="h-2 w-2 icon" />
                  {{ $t("header.navigation.photos") }}
                </button></RouterLink
              ></a
            >
          </li>
        </ul>
      </div>
      <!--End of Mobile dropdown menu-->
</template>

I tried toggling just "hidden" class first. Was working same good on all devices except for iOS. Then tried to use "hidden" and "absolute" interchangeably. Didn't help. Changing events to @touchstart + @mousedown works quite bad on Android devices. Is there any intelligent solution?

score 0 · Answer 1 · edited Mar 16 '23 at 17:35

DaisyUI posted a solution on their website:

We use a <label tabindex="0"> instead of a <button> because Safari has a bug that prevents the button from being focused.

Code:

<template>
<!--Mobile dropdown menu-->
  <div
    class="dropdown dropdown-bottom dropdown-end md:hidden lg:hidden xl:hidden 2xl:hidden"
  >
    <label class="btn btn-primary btn-xs" tabindex="0">
      <HomeIcon class="h-2 w-2 icon" />
      {{ $t("header.navigation.menu") }}
    </label>
    <ul
      tabindex="0"
      class="dropdown-content menu-vertical mt-7 p-2 overflow-y-scroll shadow bg-base-100 rounded-box w-fit"
    >
      <li>
        <a
          ><RouterLink to="/"
            ><button class="btn btn-primary btn-xs my-2 mr-5">
              <HomeIcon class="h-2 w-2 icon" />
              {{ $t("header.navigation.home") }}
            </button></RouterLink
          ></a
        >
      </li>
</ul>
</div>
</template>

This works, but would be nice to have a script solution to Apple problem.

How to make a Vue 3 classlist toggle button that opens dropdown menu in any iOS device?

1 Answers1