[InputUnstyled] Fix externally provided inputRef is ignored (#35807)

Co-authored-by: Zeeshan Tamboli <[email protected]>

packages/mui-base/src/InputUnstyled/InputUnstyled.test.tsx

@@ -31,6 +31,13 @@ describe('<InputUnstyled />', () => {
     expect(screen.getByRole('textbox')).to.have.tagName('textarea');
   });
 
+  it('should be able to attach input ref passed through props', () => {
+    const inputRef = React.createRef<HTMLInputElement>();
+    const { getByRole } = render(<InputUnstyled slotProps={{ input: { ref: inputRef } }} />);
+
+    expect(inputRef.current).to.deep.equal(getByRole('textbox'));
+  });
+
   describe('prop: multiline', () => {
     it('should pass the rows prop to the underlying textarea when multiline=true', () => {
       const { getByRole } = render(<InputUnstyled multiline rows={5} />);

packages/mui-base/src/InputUnstyled/InputUnstyled.tsx

@@ -135,7 +135,6 @@ const InputUnstyled = React.forwardRef(function InputUnstyled(
     ownerState,
     className: [classes.root, rootStateClasses, className],
   });
-
   const Input = multiline ? slots.textarea ?? 'textarea' : slots.input ?? 'input';
   const inputProps: WithOptionalOwnerState<InputUnstyledInputSlotProps> = useSlotProps({
     elementType: Input,

packages/mui-base/src/InputUnstyled/useInput.test.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createRenderer } from 'test/utils';
+import { expect } from 'chai';
+import { useInput } from '@mui/base/InputUnstyled';
+
+describe('useInput', () => {
+  const { render } = createRenderer();
+  describe('params: inputRef', () => {
+    it('should be able to attach input ref passed through params', () => {
+      const inputRef = React.createRef<HTMLInputElement>();
+
+      function Input() {
+        const { getInputProps } = useInput({
+          inputRef,
+        });
+        return <input {...getInputProps()} />;
+      }
+      const { getByRole } = render(<Input />);
+
+      expect(inputRef.current).to.deep.equal(getByRole('textbox'));
+    });
+  });
+});

packages/mui-base/src/InputUnstyled/useInput.ts

@@ -19,6 +19,7 @@ export default function useInput(parameters: UseInputParameters) {
     onFocus,
     required: requiredProp = false,
     value: valueProp,
+    inputRef: inputRefProp,
   } = parameters;
 
   const formControlContext: FormControlUnstyledState | undefined = useFormControlUnstyledContext();
@@ -76,7 +77,7 @@ export default function useInput(parameters: UseInputParameters) {
   }, []);
 
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const handleInputRef = useForkRef(inputRef, handleInputRefWarning);
+  const handleInputRef = useForkRef(inputRef, inputRefProp, handleInputRefWarning);
 
   const [focused, setFocused] = React.useState(false);