fix(fuselage-forms): withLabelHelpers missing forwardRef (#1922)

Author: dougfabris

.changeset/eighty-boxes-prove.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage-forms': patch
+---
+
+fix(fuselage-forms): withLabelHelpers missing forwardRef

packages/fuselage-forms/src/Inputs/withLabelHelpers.tsx

@@ -1,6 +1,13 @@
 // Disabled this flag since we need to wrap multiple components
 /* eslint-disable react/no-multi-comp */
-import type { ReactNode, ForwardRefExoticComponent } from 'react';
+import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
+import type {
+  ReactNode,
+  ForwardRefExoticComponent,
+  Ref,
+  RefAttributes,
+} from 'react';
+import { forwardRef } from 'react';
 import { VisuallyHidden } from 'react-aria';
 
 import {
@@ -11,28 +18,44 @@ import {
 
 type WithLabelId = { id?: string };
 
-function withLabelId<TProps>(
-  Component: ForwardRefExoticComponent<TProps & WithLabelId>,
+function withLabelId<TProps, TRef>(
+  Component: ForwardRefExoticComponent<
+    TProps & WithLabelId & RefAttributes<TRef>
+  >,
 ) {
-  const WrappedComponent = function (props: TProps) {
+  const WrappedComponent = forwardRef<TRef, TProps>(function (props, ref) {
     const labelProps = useFieldReferencedByInput();
-    return <Component {...props} {...labelProps} />;
-  };
+    return (
+      <Component
+        {...(props as TProps & WithLabelId)}
+        {...labelProps}
+        ref={ref}
+      />
+    );
+  });
 
   WrappedComponent.displayName = `withLabelId(${Component.displayName ?? Component.name ?? 'InputComponent'})`;
 
   return WrappedComponent;
 }
 
-type WithLablledBy = { 'aria-labelledby'?: string };
+type WithLabelledBy = { 'aria-labelledby'?: string };
 
-function withAriaLabelledBy<TProps>(
-  Component: ForwardRefExoticComponent<TProps & WithLablledBy>,
+function withAriaLabelledBy<TProps, TRef>(
+  Component: ForwardRefExoticComponent<
+    TProps & WithLabelledBy & RefAttributes<TRef>
+  >,
 ) {
-  const WrappedComponent = function (props: TProps) {
+  const WrappedComponent = forwardRef<TRef, TProps>(function (props, ref) {
     const labelProps = useFieldReferencedByLabel();
-    return <Component {...props} {...labelProps} />;
-  };
+    return (
+      <Component
+        {...(props as TProps & WithLabelledBy)}
+        {...labelProps}
+        ref={ref}
+      />
+    );
+  });
 
   WrappedComponent.displayName = `withAriaLabelledBy(${Component.displayName ?? Component.name ?? 'InputComponent'})`;
 
@@ -41,20 +64,23 @@ function withAriaLabelledBy<TProps>(
 
 type WithChildrenLabel = { labelChildren: ReactNode };
 
-function withVisuallyHiddenLabel<TProps>(
-  Component: ForwardRefExoticComponent<TProps & WithChildrenLabel>,
+function withVisuallyHiddenLabel<TProps, TRef>(
+  Component: ForwardRefExoticComponent<
+    TProps & WithChildrenLabel & RefAttributes<TRef>
+  >,
 ) {
-  const WrappedComponent = function (props: TProps) {
+  const WrappedComponent = forwardRef<TRef, TProps>(function (props, ref) {
     const [label, labelProps, labelRef] = useFieldWrappedByInputLabel();
+    const mergedRef = useMergedRefs(ref, labelRef as Ref<TRef>);
     return (
       <Component
-        {...props}
+        {...(props as TProps & WithChildrenLabel)}
         {...labelProps}
-        ref={labelRef}
+        ref={mergedRef}
         labelChildren={<VisuallyHidden>{label}</VisuallyHidden>}
       />
     );
-  };
+  });
 
   WrappedComponent.displayName = `withVisuallyHiddenLabel(${Component.displayName ?? Component.name ?? 'InputComponent'})`;