fix(Alert): forward ref to the alert dom element (#5010)

react-bootstrap · Feb 28, 2020 · fb79f2a · fb79f2a
1 parent f4dde13
commit fb79f2a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/Alert.js b/src/Alert.js
@@ -87,6 +87,7 @@ const Alert = React.forwardRef((uncontrolledProps, ref) => {
     <div
       role="alert"
       {...(Transition ? props : undefined)}
+      ref={ref}
       className={classNames(
         className,
         prefix,
@@ -102,7 +103,7 @@ const Alert = React.forwardRef((uncontrolledProps, ref) => {
   if (!Transition) return show ? alert : null;
 
   return (
-    <Transition unmountOnExit ref={ref} {...props} in={show}>
+    <Transition unmountOnExit {...props} in={show}>
       {alert}
     </Transition>
   );

diff --git a/test/AlertSpec.js b/test/AlertSpec.js
@@ -37,6 +37,12 @@ describe('<Alert>', () => {
     );
   });
 
+  it('should forward refs to the alert', () => {
+    const ref = React.createRef();
+    mount(<Alert ref={ref}>Yo</Alert>);
+    ref.current.tagName.should.equal('DIV');
+  });
+
   describe('Web Accessibility', () => {
     it('Should have alert role', () => {
       mount(<Alert>Message</Alert>).assertSingle('[role="alert"]');