Merge pull request #2436 from graphcommerce-org/fix/various

Added ref forwarding for the inputRef
graphcommerce-org · Nov 28, 2024 · d7b3d58 · d7b3d58
2 parents 7f17a21 + 55f94c5
commit d7b3d58
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 14 deletions.
diff --git a/.changeset/calm-sheep-relate.md b/.changeset/calm-sheep-relate.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/ecommerce-ui': patch
+---
+
+Added ref forwarding for the inputRef
diff --git a/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx b/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
@@ -8,7 +8,14 @@ import type {
   SxProps,
   Theme,
 } from '@mui/material'
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@mui/material'
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText,
+  useForkRef,
+} from '@mui/material'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
   label?: FormControlLabelProps['label']
@@ -62,7 +69,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>(
             <Checkbox
               {...rest}
               {...field}
-              inputRef={ref}
+              inputRef={useForkRef(ref, rest.inputRef)}
               color={rest.color || 'primary'}
               sx={{
                 ...(Array.isArray(sx) ? sx : [sx]),

diff --git a/packages/ecommerce-ui/components/FormComponents/NumberFieldElement.tsx b/packages/ecommerce-ui/components/FormComponents/NumberFieldElement.tsx
@@ -1,15 +1,15 @@
 import {
-  IconSvg,
   extendableComponent,
   iconMin,
   iconPlus,
+  IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
 import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { Controller, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
-import { Fab, TextField } from '@mui/material'
+import { Fab, TextField, useForkRef } from '@mui/material'
 
 export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
@@ -44,7 +44,7 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     variant = 'outlined',
     disabled,
     shouldUnregister,
-    ...textFieldProps
+    ...rest
   } = props
 
   const classes = withState({ size })
@@ -69,22 +69,22 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
 
   return (
     <TextField
-      {...textFieldProps}
+      {...rest}
       {...field}
-      inputRef={ref}
+      inputRef={useForkRef(ref, rest.inputRef)}
       value={value ?? ''}
       onChange={(ev) => {
         const newValue = (ev.target as HTMLInputElement).valueAsNumber
         onChange(Number.isNaN(newValue) ? '' : newValue)
-        textFieldProps.onChange?.(ev)
+        rest.onChange?.(ev)
       }}
       variant={variant}
       required={required}
       error={invalid}
-      helperText={error ? error.message : textFieldProps.helperText}
+      helperText={error ? error.message : rest.helperText}
       size={size}
       type='number'
-      className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
+      className={`${rest.className ?? ''} ${classes.quantity}`}
       sx={[
         {
           width: responsiveVal(90, 120),

diff --git a/packages/ecommerce-ui/components/FormComponents/SelectElement.tsx b/packages/ecommerce-ui/components/FormComponents/SelectElement.tsx
@@ -3,7 +3,7 @@ import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-for
 import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { TextFieldProps } from '@mui/material'
-import { MenuItem, TextField } from '@mui/material'
+import { MenuItem, TextField, useForkRef } from '@mui/material'
 
 type OptionBase = { id: string | number; label: string | number }
 
@@ -63,7 +63,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
       {...rest}
       value={value ?? ''}
       {...field}
-      inputRef={ref}
+      inputRef={useForkRef(ref, rest.inputRef)}
       onChange={(event) => {
         let item: number | string | O | undefined = event.target.value
         if (type === 'number') item = Number(item)

diff --git a/packages/ecommerce-ui/components/FormComponents/TextFieldElement.tsx b/packages/ecommerce-ui/components/FormComponents/TextFieldElement.tsx
@@ -4,7 +4,7 @@ import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-
 import { emailPattern, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { TextFieldProps } from '@mui/material'
-import { TextField } from '@mui/material'
+import { TextField, useForkRef } from '@mui/material'
 import React, { useState } from 'react'
 
 export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
@@ -68,7 +68,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
         onChange(type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value)
         rest.onChange?.(ev)
       }}
-      inputRef={ref}
+      inputRef={useForkRef(ref, rest.inputRef)}
       required={required}
       type={type}
       error={Boolean(error) || rest.error}