1

I have a below pop component, the problem in this component is when in the mobile view, when the user clicks on the input field, the modal goes up because the android keypad shows.

since I have the height of the modal to have the mobile keypad also. How can I render the keypad inside the modal, so that the modal sticks as like

App.js

import { useState } from "react";
import Modal from "./Modal";
import "./styles.css";

export default function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const onToggleModal = () => {
    setIsModalOpen((prevState) => !prevState);
  };

  return (
    <div className="App">
      <button onClick={onToggleModal}>Click me to open modal</button>
      {isModalOpen ? (
        <Modal show={isModalOpen} close={onToggleModal}>
          <input />
        </Modal>
      ) : null}
    </div>
  );

}

If you see the sandbox, I think is it because of the CSS of giving border as 0 and position as fixed ?

Any help is appreciated

sandbox

dev
  • 814
  • 10
  • 27
  • 1
    The keypad is not part of the viewport (else you would be able to put elements on top of it) so rendering the keypad in the modal is not possible. What you could do is adapting the height of the modal when the keypad is open (so the height become smaller) : some help here : https://www.geeksforgeeks.org/how-to-detect-virtual-keyboard-using-javascript/ – Alexis Vandepitte Nov 19 '21 at 09:11
  • So is the css is right what I have done so far? Is it doable with any CSS way like positions and bottom ? – dev Nov 19 '21 at 09:28
  • I guess .. to be honest, i don't know what you have in my mind. In fact, i don't see the problem with the keyboard pushing the modal up as it pushes all your website up. – Alexis Vandepitte Nov 19 '21 at 09:32
  • Yep so assume i have some message in the modal at the top it won't be visible so user need to click the back button which hides the keyboard and then he need to see the message because I am giving autofocus – dev Nov 19 '21 at 09:38
  • Well, it's more a problem with the UI as you can't forget the fact that the height will be smaller if the keyboard is open. There is nothing you can do about it, except adapting your UI to fit in a smaller zone. – Alexis Vandepitte Nov 19 '21 at 09:43
  • okay, but seeing other sites i still confused how this is done, for an example https://www.flipkart.com/login?ret=%2F&entryPage=HEADER_ACCOUNT&sourceContext=DEFAULT, if you see this link in mobile you can see the modal doesn't goes up and the keyboard works exactly how I want – dev Nov 19 '21 at 11:07
  • because it's not a modal that is positionned fixed, it's part of the flow of the page. All the page fits on the first 40% of the page, so when the keyboard appears it does not affect appearance of the page. – Alexis Vandepitte Nov 19 '21 at 14:12
  • I have followed the approach which you had mentioned like have two height and listen the resize event when ever resize event occurs I make 500 as width else 250 so that way it doesn't go up thanks for the help and idea :) – dev Nov 23 '21 at 10:45
  • I had one doubt regarding on Vertical step component, https://stackoverflow.com/questions/70063149/event-timeline-with-animation. If you can point me on the direction it will be helpful, Many thanks – dev Nov 23 '21 at 10:46

0 Answers0