feat(many): add missing inputRef prop to input components

INSTUI-4400

Author: ToMESSKa

packages/ui-checkbox/src/Checkbox/__new-tests__/Checkbox.test.tsx

@@ -105,6 +105,14 @@ describe('<Checkbox />', () => {
     expect(inputElem).toHaveAttribute('aria-checked', 'mixed')
   })
 
+  it('should provide an inputRef prop', async () => {
+    const inputRef = vi.fn()
+    renderCheckbox({ inputRef })
+    const input = screen.getByRole('checkbox')
+
+    expect(inputRef).toHaveBeenCalledWith(input)
+  })
+
   describe('events', () => {
     it('when clicked, fires onClick and onChange events', async () => {
       const onClick = vi.fn()

packages/ui-checkbox/src/Checkbox/index.tsx

@@ -102,6 +102,13 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     this.ref = el
   }
 
+  handleInputRef = (el: HTMLInputElement | null) => {
+    this._input = el
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(el)
+    }
+  }
+
   componentDidMount() {
     if (this._input) {
       this._input.indeterminate = this.props.indeterminate!
@@ -323,9 +330,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
             id={this.id}
             value={value}
             type="checkbox"
-            ref={(c) => {
-              this._input = c
-            }}
+            ref={this.handleInputRef}
             required={isRequired}
             disabled={disabled || readOnly}
             aria-checked={indeterminate ? 'mixed' : undefined}

packages/ui-checkbox/src/Checkbox/props.ts

@@ -80,6 +80,10 @@ type CheckboxOwnProps = {
   inline?: boolean
   labelPlacement?: 'top' | 'start' | 'end'
   isRequired?: boolean
+  /**
+   * A function that provides a reference to the actual underlying input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
 }
 
 type PropKeys = keyof CheckboxOwnProps
@@ -121,7 +125,8 @@ const propTypes: PropValidators<PropKeys> = {
   variant: PropTypes.oneOf(['simple', 'toggle']),
   inline: PropTypes.bool,
   labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
-  isRequired: PropTypes.bool
+  isRequired: PropTypes.bool,
+  inputRef: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -144,7 +149,8 @@ const allowedProps: AllowedPropKeys = [
   'variant',
   'inline',
   'labelPlacement',
-  'isRequired'
+  'isRequired',
+  'inputRef'
 ]
 
 type CheckboxState = {

packages/ui-color-picker/src/ColorPicker/__new-tests__/ColorPicker.test.tsx

@@ -389,6 +389,14 @@ describe('<ColorPicker />', () => {
         expect(errorMessage).toBeInTheDocument()
       })
     })
+
+    it('should provide an inputRef prop', async () => {
+      const inputRef = vi.fn()
+      render(<SimpleExample inputRef={inputRef} />)
+      const input = screen.getByRole('textbox')
+
+      expect(inputRef).toHaveBeenCalledWith(input)
+    })
   })
 
   describe('complex mode', () => {

packages/ui-color-picker/src/ColorPicker/index.tsx

@@ -608,7 +608,8 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
   )
 
   render() {
-    const { disabled, isRequired, placeholderText, width, id } = this.props
+    const { disabled, isRequired, placeholderText, width, id, inputRef } =
+      this.props
 
     return (
       <div
@@ -633,6 +634,7 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           onPaste={(event) => this.handleOnPaste(event)}
           onBlur={() => this.handleOnBlur()}
           messages={this.renderMessages()}
+          inputRef={inputRef}
         />
         {!this.isSimple && (
           <div

packages/ui-color-picker/src/ColorPicker/props.ts

@@ -234,6 +234,11 @@ type ColorPickerOwnProps = {
    * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
    */
   margin?: Spacing
+
+  /**
+   * A function that provides a reference to the input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
 }
 
 type ColorPickerState = {
@@ -326,7 +331,8 @@ const propTypes: PropValidators<PropKeys> = {
   value: PropTypes.string,
   width: PropTypes.string,
   withAlpha: PropTypes.bool,
-  margin: PropTypes.string
+  margin: PropTypes.string,
+  inputRef: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -350,7 +356,8 @@ const allowedProps: AllowedPropKeys = [
   'value',
   'width',
   'withAlpha',
-  'margin'
+  'margin',
+  'inputRef'
 ]
 
 export type {

packages/ui-radio-input/src/RadioInput/__new-tests__/RadioInput.test.tsx

@@ -61,6 +61,21 @@ describe('<RadioInput />', () => {
     expect(input).toHaveAttribute('type', 'radio')
   })
 
+  it('should provide an inputRef prop', async () => {
+    const inputRef = vi.fn()
+    const { container } = render(
+      <RadioInput
+        label="fake label"
+        value="someValue"
+        name="someName"
+        inputRef={inputRef}
+      />
+    )
+    const input = container.querySelector('input')
+
+    expect(inputRef).toHaveBeenCalledWith(input)
+  })
+
   describe('events', () => {
     it('responds to onClick event', async () => {
       const onClick = vi.fn()

packages/ui-radio-input/src/RadioInput/index.tsx

@@ -84,6 +84,13 @@ class RadioInput extends Component<RadioInputProps, RadioInputState> {
     this.props.makeStyles?.()
   }
 
+  handleInputRef = (el: HTMLInputElement | null) => {
+    this._input = el
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(el)
+    }
+  }
+
   handleClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
     if (this.props.disabled || this.props.readOnly) {
       e.preventDefault()
@@ -144,9 +151,7 @@ class RadioInput extends Component<RadioInputProps, RadioInputState> {
           <input
             {...props}
             id={this.id}
-            ref={(c: HTMLInputElement | null) => {
-              this._input = c
-            }}
+            ref={this.handleInputRef}
             value={value}
             name={name}
             checked={this.checked}

packages/ui-radio-input/src/RadioInput/props.ts

@@ -72,6 +72,10 @@ type RadioInputOwnProps = {
    * event.target.value will contain the new value. It will always be a string.
    */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  /**
+   * A function that provides a reference to the actual underlying input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
 }
 
 type PropKeys = keyof RadioInputOwnProps
@@ -107,7 +111,8 @@ const propTypes: PropValidators<PropKeys> = {
   context: PropTypes.oneOf(['success', 'warning', 'danger', 'off']),
   inline: PropTypes.bool,
   onClick: PropTypes.func,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  inputRef: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -123,7 +128,8 @@ const allowedProps: AllowedPropKeys = [
   'context',
   'inline',
   'onClick',
-  'onChange'
+  'onChange',
+  'inputRef'
 ]
 
 export type { RadioInputProps, RadioInputState, RadioInputStyle }

packages/ui-range-input/src/RangeInput/__new-tests__/RangeInput.test.tsx

@@ -107,6 +107,23 @@ describe('<RangeInput />', () => {
     expect(input).toHaveValue('25')
   })
 
+  it('should provide an inputRef prop', async () => {
+    const inputRef = vi.fn()
+    const { container } = render(
+      <RangeInput
+        label="Opacity"
+        name="opacity"
+        max={100}
+        min={0}
+        defaultValue={42}
+        inputRef={inputRef}
+      />
+    )
+    const input = container.querySelector('input')
+
+    expect(inputRef).toHaveBeenCalledWith(input)
+  })
+
   describe('thumbVariant prop', () => {
     it('should throw deprecation warning by default', async () => {
       render(