fix(TextInput): inputRef (#648)

Author: tenphi

.changeset/sixty-carpets-drop.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix inputRef for text inputs.

src/components/fields/Input/Input.tsx

@@ -15,7 +15,7 @@ type CubeInput = typeof TextInput & {
 };
 
 export const Input: CubeInput = Object.assign(
-  forwardRef(function Input(props, ref: ForwardedRef<HTMLInputElement>) {
+  forwardRef(function Input(props, ref: ForwardedRef<HTMLElement>) {
     return <TextInput ref={ref} {...props} />;
   }),
   {

src/components/fields/NumberInput/NumberInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, RefObject, useRef } from 'react';
+import { ForwardedRef, forwardRef, RefObject, useRef } from 'react';
 import { useLocale, useNumberField, AriaNumberFieldProps } from 'react-aria';
 import { useNumberFieldState } from 'react-stately';
 
@@ -36,7 +36,10 @@ const StepperContainer = tasty({
   },
 });
 
-function NumberInput(props: WithNullableValue<CubeNumberInputProps>, ref) {
+function NumberInput(
+  props: WithNullableValue<CubeNumberInputProps>,
+  ref: ForwardedRef<HTMLElement>,
+) {
   props = castNullableNumberValue(props);
   props = useProviderProps(props);
   props = useFieldProps(props);
@@ -53,9 +56,9 @@ function NumberInput(props: WithNullableValue<CubeNumberInputProps>, ref) {
   let showStepper = !hideStepper;
   let { locale } = useLocale();
   let state = useNumberFieldState({ ...props, locale });
-  let defaultInputRef = useRef(null);
+  let localInputRef = useRef<HTMLInputElement>(null);
 
-  inputRef = inputRef || defaultInputRef;
+  inputRef = inputRef ?? localInputRef;
 
   let {
     groupProps,
@@ -113,7 +116,7 @@ function NumberInput(props: WithNullableValue<CubeNumberInputProps>, ref) {
 }
 
 /**
- * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.
  */
 const _NumberInput = forwardRef(NumberInput);
 

src/components/fields/PasswordInput/PasswordInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useRef, useState } from 'react';
+import { ForwardedRef, forwardRef, useCallback, useRef, useState } from 'react';
 import { useTextField } from 'react-aria';
 
 import { CubeTextInputBaseProps, TextInputBase } from '../TextInput';
@@ -14,7 +14,10 @@ import { EyeIcon, EyeInvisibleIcon } from '../../../icons';
 export interface CubePasswordInputProps
   extends WithNullableValue<CubeTextInputBaseProps> {}
 
-function PasswordInput(props: CubePasswordInputProps, ref) {
+function PasswordInput(
+  props: CubePasswordInputProps,
+  ref: ForwardedRef<HTMLElement>,
+) {
   props = castNullableStringValue(props);
   props = useProviderProps(props);
   props = useFieldProps(props, {
@@ -26,7 +29,8 @@ function PasswordInput(props: CubePasswordInputProps, ref) {
   });
 
   let [type, setType] = useState('password');
-  let inputRef = useRef(null);
+  let localInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  let inputRef = props.inputRef ?? localInputRef;
   let { labelProps, inputProps } = useTextField(
     {
       ...props,

src/components/fields/TextArea/TextArea.tsx

@@ -1,4 +1,10 @@
-import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
+import {
+  ForwardedRef,
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from 'react';
 import { useControlledState } from '@react-stately/utils';
 import { useTextField } from 'react-aria';
 
@@ -22,7 +28,10 @@ export interface CubeTextAreaProps extends CubeTextInputBaseProps {
   rows?: number;
 }
 
-function TextArea(props: WithNullableValue<CubeTextAreaProps>, ref) {
+function TextArea(
+  props: WithNullableValue<CubeTextAreaProps>,
+  ref: ForwardedRef<HTMLElement>,
+) {
   props = castNullableStringValue(props);
   props = useProviderProps(props);
   props = useFieldProps(props, {
@@ -51,7 +60,8 @@ function TextArea(props: WithNullableValue<CubeTextAreaProps>, ref) {
     props.defaultValue,
     () => {},
   );
-  let inputRef = useRef<HTMLTextAreaElement>(null);
+  let localInputRef = useRef<HTMLTextAreaElement>(null);
+  let inputRef = props.inputRef ?? localInputRef;
 
   let { labelProps, inputProps } = useTextField(
     {

src/components/fields/TextInput/TextInput.tsx

@@ -16,7 +16,7 @@ export { useTextField };
 
 export const TextInput = forwardRef(function TextInput(
   props: CubeTextInputProps,
-  ref: ForwardedRef<HTMLInputElement>,
+  ref: ForwardedRef<HTMLElement>,
 ) {
   props = castNullableStringValue(props);
   props = useProviderProps(props);
@@ -28,7 +28,9 @@ export const TextInput = forwardRef(function TextInput(
     }),
   });
 
-  let inputRef = useRef(null);
+  let localInputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);
+  let inputRef = props.inputRef ?? localInputRef;
+
   let { labelProps, inputProps } = useTextField(props, inputRef);
 
   return (

src/components/fields/TextInput/text-input.test.tsx

@@ -1,3 +1,5 @@
+import { createRef } from 'react';
+
 import { renderWithForm, userEvent, render, act } from '../../../test';
 import { Field, TextInput } from '../../../index';
 
@@ -41,4 +43,17 @@ describe('<TextInput />', () => {
     expect(input).toHaveValue('Hello, World!');
     expect(formInstance.getFieldValue('test')).toEqual('Hello, World!');
   });
+
+  it('should correctly assign the inputRef to the input element', () => {
+    const inputRef = createRef<HTMLInputElement>();
+
+    const { getByRole } = render(
+      <TextInput label="test" inputRef={inputRef} />,
+    );
+
+    const input = getByRole('textbox');
+
+    // Check if the ref is assigned to the input element
+    expect(inputRef.current).toBe(input);
+  });
 });