From 4aeda27d6b2496a479c64e2aa919ec64673fb5b7 Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Fri, 20 Jan 2023 18:12:42 +0530
Subject: [PATCH] [InputUnstyled] Fix externally provided `inputRef` is ignored
 (#35807)

Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
---
 .../src/InputUnstyled/InputUnstyled.test.tsx  |  7 ++++++
 .../src/InputUnstyled/InputUnstyled.tsx       |  1 -
 .../src/InputUnstyled/useInput.test.tsx       | 23 +++++++++++++++++++
 .../mui-base/src/InputUnstyled/useInput.ts    |  3 ++-
 4 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 packages/mui-base/src/InputUnstyled/useInput.test.tsx

diff --git a/packages/mui-base/src/InputUnstyled/InputUnstyled.test.tsx b/packages/mui-base/src/InputUnstyled/InputUnstyled.test.tsx
index 461830f23d64b1..8ed41166d7f6f4 100644
--- a/packages/mui-base/src/InputUnstyled/InputUnstyled.test.tsx
+++ b/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} />);
diff --git a/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx b/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx
index 450a9edb1ead57..da6f208832b9e6 100644
--- a/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx
+++ b/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,
diff --git a/packages/mui-base/src/InputUnstyled/useInput.test.tsx b/packages/mui-base/src/InputUnstyled/useInput.test.tsx
new file mode 100644
index 00000000000000..d66bb6e50a6b63
--- /dev/null
+++ b/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'));
+    });
+  });
+});
diff --git a/packages/mui-base/src/InputUnstyled/useInput.ts b/packages/mui-base/src/InputUnstyled/useInput.ts
index 0d67f1df94143b..519899c019db1b 100644
--- a/packages/mui-base/src/InputUnstyled/useInput.ts
+++ b/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);