Command Palette appears behind virtual keyboard when inside Modal on mobile devices

Marfi333 commented 2 months ago

Environment

Operating System: Darwin
Node Version: v22.4.0
Nuxt Version: 3.12.4
CLI Version: 3.13.1
Nitro Version: -
Package Manager: pnpm@9.4.0
Builder: -
User Config: compatibilityDate, devtools, future, experimental, app, site, sitemap, routeRules, css, colorMode, runtimeConfig, modules, postcss, typescript
Runtime Modules: nuxt-headlessui@1.2.0, @nuxt/eslint@0.3.13, @nuxt/ui@2.18.4, @pinia/nuxt@0.5.4, @pinia-plugin-persistedstate/nuxt@1.2.1, @nuxt/scripts@0.8.4, nuxt-anchorscroll@1.0.3, @nuxtjs/seo@2.0.0-rc.21
Build Modules: -

Version

v2.18.4

Reproduction

https://ui.nuxt.com/components/command-palette#usage

Description

On mobile devices, when the modal is positioned at the bottom of the screen, the Command Palette becomes obscured by the virtual keyboard. This issue occurs when the Command Palette contains fewer than 6 elements or none at all, making it completely inaccessible for users.

The issue can be reproduced on the official component page:
https://ui.nuxt.com/components/command-palette

Additional context

No response

Logs

No response

Tragio commented 1 month ago

Hi @Marfi333 👋

This is an interesting one.

There is a VirtualKeyboard API that would allow us to do something like height: calc(100vh - env(keyboard-inset-height)) however that is only for Chrome, at the moment. Which is not suitable.

The other possible way would be using Visual Viewport API but then I think we are adding stuff that can bring trouble along the line, only for some small edge cases.

Perhaps by using min-h-0 lg:min-h-full you solve your use case 🤔

<script setup lang="ts">
const isOpen = ref(false)

const people = [
  { id: 1, label: 'Wade Cooper' },
  { id: 2, label: 'Arlene Mccoy' },
  { id: 3, label: 'Devon Webb' },
  { id: 4, label: 'Tom Cook' },
  { id: 5, label: 'Tanya Fox' },
  { id: 6, label: 'Hellen Schmidt' },
  { id: 7, label: 'Caroline Schultz' },
  { id: 8, label: 'Mason Heaney' },
  { id: 9, label: 'Claudie Smitham' },
  { id: 10, label: 'Emil Schaefer' },
]

const selected = ref([])
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal
      v-model="isOpen"
      :ui="{
        container: 'min-h-0 lg:min-h-full',
      }"
    >
      <UCommandPalette
        v-model="selected"
        multiple
        nullable
        :groups="[{ key: 'people', commands: people }]"
      />
    </UModal>
  </div>
</template>

ZeroDayZ7 commented 1 month ago

I also had this problem and this solution helped, but I have a problem with icons, icons are not displayed on mobile device or desktop from githubpages

Localhost Github pages

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Zaloguj" @click="isOpen = true" />

    <UModal v-model="isOpen" 
      :ui="{
      container: 'min-h-0 lg:min-h-full'
    }">
      <div class="p-4">
        <div class="flex items-center justify-between">
          <UButton 
            color="white"
            variant="ghost" 
            icon="i-heroicons-x-mark-20-solid" 
            class="-my-1 absolute right-3 top-3 p-1 h-5 w-5"
            @click="isOpen = false"
            loading
            />

        </div>
        <AuthLoginForm />
      </div>
    </UModal>
  </div>
</template>

am I doing something wrong?

nuxt / ui