fix(Form): fix controlId override behavior on FormRange and FormSelect (react-bootstrap#5880)

Author: golota60

src/FormRange.tsx

@@ -1,8 +1,10 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import * as React from 'react';
+import { useContext } from 'react';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixOnlyProps } from './helpers';
+import FormContext from './FormContext';
 
 export interface FormRangeProps
   extends BsPrefixOnlyProps,
@@ -30,10 +32,16 @@ const propTypes = {
 
   /** A callback fired when the `value` prop changes */
   onChange: PropTypes.func,
+
+  /**
+   * Uses `controlId` from `<FormGroup>` if not explicitly specified.
+   */
+  id: PropTypes.string,
 };
 
 const FormRange = React.forwardRef<HTMLInputElement, FormRangeProps>(
-  ({ bsPrefix, className, ...props }, ref) => {
+  ({ bsPrefix, className, id, ...props }, ref) => {
+    const { controlId } = useContext(FormContext);
     bsPrefix = useBootstrapPrefix(bsPrefix, 'form-range');
 
     return (
@@ -42,6 +50,7 @@ const FormRange = React.forwardRef<HTMLInputElement, FormRangeProps>(
         type="range"
         ref={ref}
         className={classNames(className, bsPrefix)}
+        id={id || controlId}
       />
     );
   },

src/FormSelect.tsx

@@ -1,8 +1,10 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import * as React from 'react';
+import { useContext } from 'react';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixOnlyProps, BsPrefixRefForwardingComponent } from './helpers';
+import FormContext from './FormContext';
 
 export interface FormSelectProps
   extends BsPrefixOnlyProps,
@@ -66,10 +68,12 @@ const FormSelect: BsPrefixRefForwardingComponent<'select', FormSelectProps> =
         className,
         isValid = false,
         isInvalid = false,
+        id,
         ...props
       },
       ref,
     ) => {
+      const { controlId } = useContext(FormContext);
       bsPrefix = useBootstrapPrefix(bsPrefix, 'form-select');
 
       return (
@@ -84,6 +88,7 @@ const FormSelect: BsPrefixRefForwardingComponent<'select', FormSelectProps> =
             isValid && `is-valid`,
             isInvalid && `is-invalid`,
           )}
+          id={id || controlId}
         />
       );
     },

test/FormRangeSpec.js

@@ -1,11 +1,28 @@
 import { mount } from 'enzyme';
 
 import FormRange from '../src/FormRange';
+import FormGroup from '../src/FormGroup';
 
 describe('<FormRange>', () => {
   it('should render correctly', () => {
     mount(
       <FormRange id="foo" name="bar" className="my-control" />,
     ).assertSingle('input#foo.form-range.my-control[type="range"][name="bar"]');
   });
+
+  it('should render controlId as id correctly', () => {
+    mount(
+      <FormGroup controlId="test-id">
+        <FormRange />
+      </FormGroup>,
+    ).assertSingle('.form-range#test-id');
+  });
+
+  it('should override controlId correctly', () => {
+    mount(
+      <FormGroup controlId="test-id">
+        <FormRange id="overridden-id" />
+      </FormGroup>,
+    ).assertSingle('.form-range#overridden-id:not(#test-id)');
+  });
 });

test/FormSelectSpec.js

@@ -1,6 +1,7 @@
 import { mount } from 'enzyme';
 
 import FormSelect from '../src/FormSelect';
+import FormGroup from '../src/FormGroup';
 
 describe('<FormSelect>', () => {
   it('should render correctly', () => {
@@ -30,4 +31,24 @@ describe('<FormSelect>', () => {
       'select.form-select.is-invalid',
     );
   });
+
+  it('should render controlId correctly', () => {
+    mount(
+      <FormGroup controlId="test-id">
+        <FormSelect>
+          <option>1</option>
+        </FormSelect>
+      </FormGroup>,
+    ).assertSingle('.form-select#test-id');
+  });
+
+  it('should override controlId correctly', () => {
+    mount(
+      <FormGroup controlId="test-id">
+        <FormSelect id="overridden-id">
+          <option>1</option>
+        </FormSelect>
+      </FormGroup>,
+    ).assertSingle('.form-select#overridden-id:not(#test-id)');
+  });
 });