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

[ToMESSKa]

INSTUI-4400

ISSUE:

• some components (e.g., RadioInput, Checkbox) that use an input field are missing the inputRef prop.

TEST PLAN:

• copy the code below to the preview
• click on each of the five "Focus' buttons
• the corresponding input field should get focused
• review the tests

class FocusExample extends React.Component {
  radioElement = null;
  checkboxElement = null;
  checkboxToggleElement = null;
  rangeInputElement = null;  
  colorElement = null;

  focusRadio = () => {
    if (this.radioElement) {
      this.radioElement.focus();
    }
  };

  focusCheckbox = () => {
    if (this.checkboxElement) {
      this.checkboxElement.focus();
    }
  };

  focusCheckboxToggle = () => {
    if (this.checkboxToggleElement) {
      this.checkboxToggleElement.focus();
    }
  };

  focusRangeInput = () => { 
    if (this.rangeInputElement) {
      this.rangeInputElement.focus();
    }
  };

  focusColor = () => {
    if (this.colorElement) {
      this.colorElement.focus();
    }
  };

  render() {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        <div>
          <RadioInput 
            
            label="RadioInput" 
            value="radio1" 
            name="radioGroup" 
            inputRef={(el) => { this.radioElement = el; }} 
          />
          <Button onClick={this.focusRadio}>Focus Radio</Button>
        </div>

        <div>
          <Checkbox 
            label="Checkbox" 
            value="checkbox1" 
            inputRef={(el) => { this.checkboxElement = el; }} 
          />
          <Button onClick={this.focusCheckbox}>Focus Checkbox</Button>
        </div>

         <div>
          <Checkbox 
            variant="toggle"
            label="Checkbox toggle" 
            value="checkboxtoggle1" 
            inputRef={(el) => { this.checkboxToggleElement = el; }} 
          />
          <Button onClick={this.focusCheckboxToggle}>Focus Checkbox</Button>
        </div>

        <div>
          <RangeInput
            label="RangeInput" 
            min="0" 
            max="100" 
            inputRef={(el) => { this.rangeInputElement = el; }} 
            thumbVariant="accessible"
          />
          <Button onClick={this.focusRangeInput}>Focus Range Input</Button>  
        </div>

        <div>
          <ColorPicker 
            label="ColorPicker" 
            defaultValue="#ff0000" 
            inputRef={(el) => { this.colorElement = el; }} 
          />
          <Button onClick={this.focusColor}>Focus Color Picker</Button>
        </div>
      </div>
    );
  }
}

render(<FocusExample />);

[github-actions]

PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-06-11 11:14 UTC

[Copilot]

Pull Request Overview

This PR adds an inputRef prop to several form input components, allowing consumers to obtain a ref to the underlying <input> element. Key changes include:

• Defining the inputRef prop in props, propTypes, and allowedProps for RangeInput, RadioInput, Checkbox, and ColorPicker.
• Implementing handleInputRef methods and wiring ref callbacks to invoke the provided inputRef.
• Adding unit tests to verify that inputRef is called with the rendered input element.

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/ui-range-input/src/RangeInput/props.ts	Added inputRef to type, propTypes, and allowedProps
packages/ui-range-input/src/RangeInput/index.tsx	Introduced handleInputRef and replaced inline ref
packages/ui-range-input/src/RangeInput/new-tests/RangeInput.test.tsx	Added test for inputRef
packages/ui-radio-input/src/RadioInput/props.ts	Added inputRef to type, propTypes, and allowedProps
packages/ui-radio-input/src/RadioInput/index.tsx	Introduced handleInputRef and replaced inline ref
packages/ui-radio-input/src/RadioInput/new-tests/RadioInput.test.tsx	Added test for inputRef
packages/ui-color-picker/src/ColorPicker/props.ts	Added inputRef to type, propTypes, and allowedProps
packages/ui-color-picker/src/ColorPicker/index.tsx	Destructured inputRef and passed it to inner input
packages/ui-color-picker/src/ColorPicker/new-tests/ColorPicker.test.tsx	Added test for inputRef
packages/ui-checkbox/src/Checkbox/props.ts	Added inputRef to type, propTypes, and allowedProps
packages/ui-checkbox/src/Checkbox/index.tsx	Introduced handleInputRef and replaced inline ref
packages/ui-checkbox/src/Checkbox/new-tests/Checkbox.test.tsx	Added test for inputRef