fix(Modal): fix autofocus for inputs when animation is enabled (#6278)

* Fix buttons margin

* Fix "The '.husky/pre-commit' hook was ignored because it's not set as executable."

* bootstrap => Bootstrap

* New modal example that demonstrates focus on a specific element

* Fix autoFocus inside modal

src/Modal.tsx

@@ -402,7 +402,6 @@ const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
 
       const handleEnter = (node, isAppearing) => {
         if (node) {
-          node.style.display = 'block';
           updateDialogStyle(node);
         }
 
@@ -445,10 +444,9 @@ const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
 
       const baseModalStyle = { ...style, ...modalStyle };
 
-      // Sets `display` always block when `animation` is false
-      if (!animation) {
-        baseModalStyle.display = 'block';
-      }
+      // If `display` is not set to block, autoFocus inside the modal fails
+      // https://github.com/react-bootstrap/react-bootstrap/issues/5102
+      baseModalStyle.display = 'block';
 
       const renderDialog = (dialogProps) => (
         <div

www/src/examples/Modal/DefaultSizing.js

@@ -4,7 +4,7 @@ function Example() {
 
   return (
     <>
-      <Button onClick={() => setSmShow(true)}>Small modal</Button>{' '}
+      <Button onClick={() => setSmShow(true)} className="me-2">Small modal</Button>
       <Button onClick={() => setLgShow(true)}>Large modal</Button>
       <Modal
         size="sm"

www/src/examples/Modal/Focus.js

@@ -0,0 +1,49 @@
+function Example() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Launch demo modal
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+              <Form.Label>Email address</Form.Label>
+              <Form.Control
+                type="email"
+                placeholder="name@example.com"
+                autoFocus
+              />
+            </Form.Group>
+            <Form.Group
+              className="mb-3"
+              controlId="exampleForm.ControlTextarea1"
+            >
+              <Form.Label>Example textarea</Form.Label>
+              <Form.Control as="textarea" rows={3} />
+            </Form.Group>
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleClose}>
+            Save Changes
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+render(<Example />);

www/src/examples/Modal/FullScreen.js

@@ -11,7 +11,7 @@ function Example() {
   return (
     <>
       {values.map((v, idx) => (
-        <Button key={idx} className="me-2" onClick={() => handleShow(v)}>
+        <Button key={idx} className="me-2 mb-2" onClick={() => handleShow(v)}>
           Full screen
           {typeof v === 'string' && `below ${v.split('-')[0]}`}
         </Button>

www/src/pages/components/modal.mdx

@@ -12,6 +12,7 @@ import ModalCustomSizing from '../../examples/Modal/CustomSizing';
 import ModalVerticallyCentered from '../../examples/Modal/VerticallyCentered';
 import ModalWithoutAnimation from '../../examples/Modal/WithoutAnimation';
 import ModalGrid from '../../examples/Modal/Grid';
+import ModalFocus from '../../examples/Modal/Focus';
 
 import styles from '../../css/examples.module.scss';
 
@@ -90,9 +91,15 @@ inside the modal content.
 
 <ReactPlayground codeText={ModalGrid} />
 
+### Focus on specific element
+
+You can focus on an element inside the modal using `autoFocus` attribute on the element.
+
+<ReactPlayground codeText={ModalFocus} />
+
 ## Optional Sizes
 
-You can specify a bootstrap large or small modal by using the
+You can specify a Bootstrap large or small modal by using the
 `size` prop.
 
 <ReactPlayground codeText={ModalDefaultSizing} />