Iphone Keyboard Issue when we have input in content

[charanjit-singh]

https://codesandbox.io/s/competent-joana-7cxmh6?file=/src/App.js

Open this in iPhone and try to fill in the input field. Keyboard covers the input box instead of pushing it.

import Sheet from "react-modal-sheet";
import { useState } from "react";

function Example() {
  const [isOpen, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open sheet</button>

      <Sheet
        detent="content-height"
        isOpen={isOpen}
        onClose={() => setOpen(false)}
      >
        <Sheet.Container>
          <Sheet.Header />
          <Sheet.Content>
            <input
              style={{
                width: "100%",
                fontSize: 18
              }}
            />
          </Sheet.Content>
        </Sheet.Container>
        <Sheet.Backdrop />
      </Sheet>
    </>
  );
}

export default Example;

screenRecording-28-8-2023-16-58.mp4

[charanjit-singh]

For now https://codesandbox.io/s/fancy-platform-k75s9z?file=/src/App.js:0-802 is working which is using another library

https://github.com/tech-systems/panes

[eimerreis]

We are facing the same issue and it's kind of a show stopper to continue using react-modal-sheet 😢

[mghdmi]

same issue

[eimerreis]

FYI: You can use the disableScrollLocking prop now and set it to true to fix this issue.

The downside is that you will have to take care of scroll-locking yourself then. See https://github.com/Temzasse/react-modal-sheet#props