[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.

[GasparAdragna]

Im having the same issue

[Luisquii]

Im having the same issue

I think there should be a better solution. After some days testing my solution is not good enough, it feels dumb when working with multiple inputs on a drawer.

[wingkwong]

@Luisquii from this link https://www.vivodemispropiedades.com/login, i didn't see the drawer. Can you please update it so that I could test on my phone?

[GasparAdragna]

@wingkwong When the keyboard opens insisde a drawer it does not do so on top of it, but it "pushes" all the content inside. Is that expected behaviour? It's really anoying since there are elements, such as autocomplete, that prevent scrolling so the user cannot see properly the input.

[Luisquii]

@Luisquii from this link https://www.vivodemispropiedades.com/login, i didn't see the drawer. Can you please update it so that I could test on my phone?

You will need to create an account to navigate over the different drawers.

You can also watch the video attached on the original post where what Gaspar is saying is shown.

Or you can watch this video too where you will observe how hard is to deal with the inputs of a date range picker when trying to set a stars and end time : https://github.com/user-attachments/assets/addc13b9-b4db-4aef-bccc-7fc82487461b

Notice that apparently this behavior only happens on iOS.

I am not able to pass the prop of size 'lg' to the time inputs (this is what kind of solved my issue for the situation on the original post), so that is why it keeps zooming in and immediately it closes the iOS keyboard and then the daterange picker.

Basically dealing with inputs inside a drawer on iOS is frustrating, a lot of unexpected behaviors.