fix(FormLabel): forward ref when rendering as Col (#5835)

react-bootstrap · Jun 3, 2021 · 98b6b87 · 98b6b87
1 parent 4ee2011
commit 98b6b87
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/FormLabel.tsx b/src/FormLabel.tsx
@@ -107,7 +107,13 @@ const FormLabel: FormLabel = React.forwardRef(
 
     if (column)
       return (
-        <Col as="label" className={classes} htmlFor={htmlFor} {...props} />
+        <Col
+          ref={ref as React.ForwardedRef<HTMLLabelElement>}
+          as="label"
+          className={classes}
+          htmlFor={htmlFor}
+          {...props}
+        />
       );
 
     return (

diff --git a/test/FormLabelSpec.js b/test/FormLabelSpec.js
@@ -71,6 +71,27 @@ describe('<FormLabel>', () => {
     expect(instance.input.tagName).to.equal('LABEL');
   });
 
+  it('should support ref forwarding when rendered as a Col', () => {
+    class Container extends React.Component {
+      render() {
+        return (
+          <FormGroup controlId="foo">
+            <FormLabel
+              type="text"
+              column
+              ref={(ref) => {
+                this.input = ref;
+              }}
+            />
+          </FormGroup>
+        );
+      }
+    }
+
+    const instance = mount(<Container />).instance();
+    expect(instance.input.tagName).to.equal('LABEL');
+  });
+
   it('accepts as prop', () => {
     mount(<FormLabel as="legend">body</FormLabel>).assertSingle('legend');
   });