[BUG] - DRAWER MESSED WHEN KEYBOARD SHOWS UP ON MOBILE

[Luisquii]

HeroUI Version

"@nextui-org/react": "^2.6.10",

Describe the bug

Hi, some one knows how to avoid this issue with the drawer on mobile devices ?

So when you click over an input, the keyboard shows up and it resizes the drawer, then after few more clicks on other inputs it is impossible to use it, the ui gets messed.

It is a simply next ui drawer.

What can I do to solve this issue?

ScreenRecording_01-21-2025_9-51-32_p.m._1.mov

This is the code I am using to render a drawer

"use client";

import {
  Button,
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
} from "@nextui-org/react";
import React, { useEffect, useState } from "react";
import ConfirmationModal from "./ConfirmationModal";

interface DrawerFormProps {
  isOpen: boolean;
  onClose: () => void;
  header: React.ReactNode;
  children: React.ReactNode;
  onSubmit?: () => Promise<void>;
  onDelete?: () => Promise<void>;
  onCancel?: () => void;
  size?:
    | "xs"
    | "sm"
    | "md"
    | "lg"
    | "xl"
    | "2xl"
    | "3xl"
    | "4xl"
    | "5xl"
    | "full";
  placement?: "left" | "right" | "top" | "bottom";
  backdrop?: "opaque" | "blur" | "transparent";
  isDismissable?: boolean;
  isKeyboardDismissDisabled?: boolean;
  submitLabel?: string;
  deleteLabel?: string;
  cancelLabel?: string;
  isSubmitDisabled?: boolean;
  isDeleteDisabled?: boolean;
}

export default function DrawerForm({
  isOpen,
  onClose,
  header,
  children,
  onSubmit,
  onDelete,
  onCancel,
  size = "md",
  placement = "right",
  backdrop = "opaque",
  isDismissable = true,
  isKeyboardDismissDisabled = false,
  submitLabel = "Guardar",
  deleteLabel = "Eliminar",
  cancelLabel = "Cancelar",
  isSubmitDisabled = false,
  isDeleteDisabled = false,
}: DrawerFormProps) {
  const [isDeleteLoading, setIsDeleteIsLoading] = useState(false);
  const [isSubmitLoading, setIsSubmitLoading] = useState(false);

  useEffect(() => {
    return () => {
      setIsDeleteIsLoading(false);
      setIsSubmitLoading(false);
    };
  }, []);
  return (
    <Drawer
      isOpen={isOpen}
      onClose={onClose}
      size={size}
      placement={placement}
      backdrop={backdrop}
      isDismissable={isDismissable}
      isKeyboardDismissDisabled={isKeyboardDismissDisabled}
    >
      <DrawerContent>
        {(onClose) => (
          <>
            <DrawerHeader className="flex flex-col gap-1">
              {header}
            </DrawerHeader>
            <DrawerBody>{children}</DrawerBody>
            <DrawerFooter>
              <div className="flex justify-between w-full">
                <div>
                  {onDelete && (
                    <ConfirmationModal
                      onConfirm={async () => {
                        setIsDeleteIsLoading(true);
                        await onDelete();
                        setIsDeleteIsLoading(false);
                        onClose();
                      }}
                      title="Eliminar"
                      description="Atención, estas apunto de eliminar este dato."
                    >
                      {({ onOpen: onOpenConfirmationModal }) => (
                        <Button
                          color="danger"
                          variant="light"
                          onPress={onOpenConfirmationModal}
                          isDisabled={isDeleteDisabled}
                          isLoading={isDeleteLoading}
                        >
                          {deleteLabel}
                        </Button>
                      )}
                    </ConfirmationModal>
                  )}
                </div>
                <div className="flex gap-2">
                  {onCancel && (
                    <Button
                      color="default"
                      variant="light"
                      onPress={onCancel || onClose}
                    >
                      {cancelLabel}
                    </Button>
                  )}
                  {onSubmit && (
                    <Button
                      color="primary"
                      onPress={async () => {
                        setIsSubmitLoading(true);
                        await onSubmit();
                        setIsSubmitLoading(false);
                      }}
                      isDisabled={isSubmitDisabled || isSubmitLoading}
                      isLoading={isSubmitLoading}
                    >
                      {submitLabel}
                    </Button>
                  )}
                </div>
              </div>
            </DrawerFooter>
          </>
        )}
      </DrawerContent>
    </Drawer>
  );
}

Your Example Website or App

https://www.vivodemispropiedades.com/login

Steps to Reproduce the Bug or Issue

Open a drawer on mobile device (iOS)
write on an input
Try to select or write another component where the keyboard must be opened
The ui will be damaged an impossible to use.

Expected behavior

The drawer stays the same size instead of resizing with the keyboard.

Screenshots or Videos

ScreenRecording_01-21-2025_9-51-32_p.m._1.mov

Operating System Version

iOS

Browser

Safari

[linear]

ENG-1930 [BUG] - DRAWER MESSED WHEN KEYBOARD SHOWS UP ON MOBILE

[Luisquii]

The only solution I found was to set the size of inputs to 'lg' if is mobile and on . This way we avoid the auto zoom to input on iOS.

If someone else knows a better solution, please let me know.