从模态中的 OverlayTrigger 打开时，React-Bootstrap 输入文本失去焦点

Question

我在模式中有一个按钮，单击它会打开一个弹出窗口组件，在弹出窗口中我有一个输入文本字段。

我遇到的问题是输入立即失去焦点，我无法输入，因为其他东西正在劫持它的焦点，我无法弄清楚是什么，here问题的工作示例。

这里是有问题的代码：

import "./styles.css";

import { Fragment, useState } from "react";
import { Button, Modal, OverlayTrigger, Popover, Form } from "react-bootstrap";

export default function App() {
  const [showModal, setShowModal] = useState(false);
  const [inputValue, setInputValue] = useState("");

  const popover = (
    <Popover id="popover-basic">
      <Popover.Content>
        <Form.Control
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Enter value"
        />
      </Popover.Content>
    </Popover>
  );

  return (
    <div className="App">
      <Fragment>
        <Button variant="primary" onClick={() => setShowModal(true)}>
          Open
        </Button>

        {showModal && (
          <Modal
            show={showModal}
            onHide={() => setShowModal(false)}
            centered
            backdrop="static"
            animation={false}
          >
            <Modal.Header closeButton>modal</Modal.Header>
            <Modal.Body>
              <p>Hello</p>

              <OverlayTrigger
                trigger="click"
                placement="right"
                overlay={popover}
              >
                <Button variant="secondary">Open Popover</Button>
              </OverlayTrigger>
            </Modal.Body>
          </Modal>
        )}
      </Fragment>
    </div>
  );
}

Answer 1

Modal 有一个属性“enforceFocus”，它使焦点保持在 Modal 组件上。属性值默认设置为 true。将其设置为 false，您将能够使用您的输入。

"https://react-bootstrap-v4.netlify.app/components/modal/#modal-props

从模态中的 OverlayTrigger 打开时，React-Bootstrap 输入文本失去焦点

React-Bootstrap input text lose focus when opened from a OverlayTrigger in a Modal

reactjs

react-bootstrap