Android can't type in if a input inside a modal and the modal is too high

[neekey]

Steps

Create a Modal and create at least an <input /> in it, above the input just add some paragraphes to it to gain more height for the modal content, example:

import React from 'react';
import ReactDom from 'react-dom';
import { Modal } from 'semantic-ui-react';
import 'semantic-ui-less/semantic.less';

function ModalTest() {
  return (<Modal open size="small">
    <Modal.Content>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <input type="text" />
    </Modal.Content>
  </Modal>);
}

ReactDom.render(<ModalTest />,
  document.body
);

Expected Result

When you click the input in an Android phone, the keyboard should show up and you should be able to type.

Actual Result

After you click the input in an Android phone, the keyboard does show up for a sec, and then disappear, it seems like the reposition or resize of the modal unfocused the input, which cause the keyboard to disappear.

If you reduce the height of the modal content (remove some paragraphes), everything get back to normal

Version

0.64.4

[levithomason]

Fixed in 0.65. It was in fact the breaking change to Modal focus that caused the minor version bump. See #1341.

You should update your app to the latest 0.67.2. You should search the changelog for breaking to see which breaking changes are included in each minor version bump.

We only ship 1 or 2 breaking changes at a time and they are usually very minor. Click on the link to the PR from the changelog to see an upgrade guide.