In modal box Input Fields Obscured or hidden below by Keyboard on Mobile Devices

[dharmveer97]

NextUI Version

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

Describe the bug

On mobile devices, I've created forms within a modal box. However, when the keyboard opens up, the input fields are below by the keyboard, making it difficult for users to fill out the form.

Environment

• Device: [e.g., iPhone X, Samsung Galaxy S10]
• Browser: [e.g., Safari, Chrome]

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Steps to Reproduce

1. Open the modal form on a mobile device.
2. Atleast add 6 fields in the form and i'm using Formik lib BTW.
3. Focus on an input field using mobile device to bring up the keyboard.
4. Observe that the input fields are covered by the keyboard.

Expected behavior

When the keyboard opens, the modal form should adjust its position so that the input fields remain visible and accessible.

Operating System Version

• Device: [e.g., iPhone X, Samsung Galaxy S10] - Browser: [e.g., Safari, Chrome] Macos for dev

Browser

Safari

[linear[bot]]

ENG-1003 In modal box Input Fields Obscured by Keyboard on Mobile Devices

[dharmveer97]

https://github.com/dharmveer97/nextui-modal-bug-test

here is the testing github repo

[dharmveer97]

ENG-1003 In modal box Input Fields Obscured by Keyboard on Mobile Devices

????

[dharmveer97]

https://github.com/nextui-org/nextui/assets/51308779/84f82427-088e-439e-bce4-63cc312fe898

[alphaxek]

Hi @dharmveer97, I went through you Vercel app, seems to be working fine in signup/login pages.

You can ignore the above ticket [ENG-1003], its for their team's internal purposes👍

[dharmveer97]

Hi @alphaxek the login and sign-up pages are separate pages, not modal boxes. The issue occurs when I put a form in a modal box. On mobile devices, the keyboard opens up and the fields get hidden under the keyboard.

Here is the demo repo https://github.com/dharmveer97/nextui-modal-bug-test @alphaxek

[dharmveer97]

TEMP SOLUTION

'use client';

import React, { useEffect, useRef } from 'react';
import {
  Button,
  useDisclosure,
  Modal,
  ModalContent,
  ModalBody,
} from '@nextui-org/react';

import CreateLotForm from '../../components/forms/CreateLotForm';

const AddLotModal = () => {
  const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
  const modalBodyRef = useRef(null);

  const handleOpen = () => {
    onOpen();
  };

  useEffect(() => {
    if (modalBodyRef.current) {
      const inputs = modalBodyRef.current.querySelectorAll(
        'input, textarea, select',
      );
      inputs.forEach((input) => {
        input.addEventListener('focus', () => {
          setTimeout(() => {
            input.scrollIntoView({ behavior: 'smooth', block: 'center' });
          }, 300);
        });
      });
    }
  }, [isOpen]);

  return (
    <div>
      <div className="flex flex-wrap gap-3">
        <Button
          variant="flat"
          color="warning"
          onClick={handleOpen}
          className="capitalize"
        >
          Add New
        </Button>
      </div>

      <Modal
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        isDismissable={false}
        scrollBehavior="outside"
        size="5xl"
      >
        <ModalContent>
          {() => (
            <>
              {/* empty div for more space or height */}
              <div className="pt-12 block sm:hidden" />
              <ModalBody ref={modalBodyRef}>
                <CreateLotForm
                  enableReinitialize
                  close={onClose}
                  onSubmit={() => {}}
                />
                {/* empty div for more space or height */}
                <div className="pb-44 block sm:hidden" />
              </ModalBody>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );
};

export default AddLotModal;

[alphaxek]

@dharmveer97 have you added empty div for space?

[alphaxek]

@dharmveer97 Sure