Merge pull request #2203 from graphcommerce-org/bug/GCOM-1320

CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form.
graphcommerce-org · Feb 19, 2024 · f3d0311 · f3d0311
2 parents 7430240 + dc4e77a
commit f3d0311
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 42 deletions.
diff --git a/.changeset/eight-flowers-heal.md b/.changeset/eight-flowers-heal.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/ecommerce-ui': patch
+---
+
+CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form.
diff --git a/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx b/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
@@ -47,7 +47,8 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
       name={name}
       rules={rules}
       control={control}
-      render={({ field: { value, onChange }, fieldState: { invalid, error } }) => {
+      render={({ field: { value, onChange, ref, ...field }, fieldState: { invalid, error } }) => {
+        // eslint-disable-next-line no-nested-ternary
         const parsedHelperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -61,16 +62,16 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                 control={
                   <Checkbox
                     {...rest}
+                    {...field}
+                    inputRef={ref}
                     color={rest.color || 'primary'}
                     sx={{
                       ...(Array.isArray(sx) ? sx : [sx]),
                       color: invalid ? 'error.main' : undefined,
                     }}
                     value={value}
                     checked={!!value}
-                    onChange={() => {
-                      onChange(!value)
-                    }}
+                    onChange={() => onChange(!value)}
                   />
                 }
               />

diff --git a/packages/ecommerce-ui/components/FormComponents/MultiSelectElement.tsx b/packages/ecommerce-ui/components/FormComponents/MultiSelectElement.tsx
@@ -72,7 +72,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
       name={name}
       rules={rules}
       control={control}
-      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
+      render={({ field: { value, onChange, ...field }, fieldState: { invalid, error } }) => {
         helperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -102,14 +102,14 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
             )}
             <Select
               {...rest}
+              {...field}
               id={rest.id || `select-multi-select-${name}`}
               multiple
               label={label || undefined}
               error={invalid}
               value={value || []}
               required={required}
               onChange={onChange}
-              onBlur={onBlur}
               MenuProps={{
                 ...rest.MenuProps,
                 PaperProps: {
@@ -126,23 +126,23 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
                 typeof rest.renderValue === 'function'
                   ? rest.renderValue
                   : showChips
-                  ? (selected) => (
-                      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-                        {((selected as any[]) || []).map((selectedValue) => (
-                          <Chip
-                            key={selectedValue}
-                            label={selectedValue}
-                            style={{ display: 'flex', flexWrap: 'wrap' }}
-                            onDelete={() => {
-                              onChange(value.filter((i: any) => i !== selectedValue))
-                              // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
-                            }}
-                            deleteIcon={<IconSvg src={iconClose} />}
-                          />
-                        ))}
-                      </div>
-                    )
-                  : (selected) => (Array.isArray(selected) ? selected.join(', ') : '')
+                    ? (selected) => (
+                        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                          {((selected as any[]) || []).map((selectedValue) => (
+                            <Chip
+                              key={selectedValue}
+                              label={selectedValue}
+                              style={{ display: 'flex', flexWrap: 'wrap' }}
+                              onDelete={() => {
+                                onChange(value.filter((i: any) => i !== selectedValue))
+                                // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
+                              }}
+                              deleteIcon={<IconSvg src={iconClose} />}
+                            />
+                          ))}
+                        </div>
+                      )
+                    : (selected) => (Array.isArray(selected) ? selected.join(', ') : '')
               }
             >
               {options.map((item) => {

diff --git a/packages/ecommerce-ui/components/FormComponents/NumberFieldElement.tsx b/packages/ecommerce-ui/components/FormComponents/NumberFieldElement.tsx
@@ -54,21 +54,21 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
       control={control}
       rules={rules}
       defaultValue={defaultValue}
-      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
+      render={({ field: { value, onChange, ref, ...field }, fieldState: { invalid, error } }) => {
         const valueAsNumber = value ? parseFloat(value) : 0
 
         return (
           <TextField
             {...textFieldProps}
-            variant={variant}
-            name={name}
+            {...field}
+            inputRef={ref}
             value={value ?? ''}
             onChange={(ev) => {
               const newValue = (ev.target as HTMLInputElement).valueAsNumber
               onChange(Number.isNaN(newValue) ? '' : newValue)
               textFieldProps.onChange?.(ev)
             }}
-            onBlur={onBlur}
+            variant={variant}
             required={required}
             error={invalid}
             helperText={error ? error.message : textFieldProps.helperText}

diff --git a/packages/ecommerce-ui/components/FormComponents/SelectElement.tsx b/packages/ecommerce-ui/components/FormComponents/SelectElement.tsx
@@ -37,7 +37,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
       rules={validation}
       control={control}
       defaultValue={defaultValue}
-      render={({ field: { onBlur, onChange, value }, fieldState: { invalid, error } }) => {
+      render={({ field: { onChange, value, ref, ...field }, fieldState: { invalid, error } }) => {
         // handle shrink on number input fields
         if (type === 'number' && typeof value !== 'undefined') {
           rest.InputLabelProps = rest.InputLabelProps || {}
@@ -47,9 +47,9 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
         return (
           <TextField
             {...rest}
-            name={name}
             value={value ?? ''}
-            onBlur={onBlur}
+            {...field}
+            inputRef={ref}
             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/SliderElement.tsx b/packages/ecommerce-ui/components/FormComponents/SliderElement.tsx
@@ -39,7 +39,7 @@ export function SliderElement<TFieldValues extends FieldValues>({
       name={name}
       control={control}
       rules={rules}
-      render={({ field: { onChange, value }, fieldState: { invalid, error } }) => {
+      render={({ field, fieldState: { invalid, error } }) => {
         const parsedHelperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -52,12 +52,7 @@ export function SliderElement<TFieldValues extends FieldValues>({
                 {label}
               </FormLabel>
             )}
-            <Slider
-              {...other}
-              value={value}
-              onChange={onChange}
-              valueLabelDisplay={other.valueLabelDisplay || 'auto'}
-            />
+            <Slider {...other} {...field} valueLabelDisplay={other.valueLabelDisplay || 'auto'} />
             {parsedHelperText && (
               <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>
             )}

diff --git a/packages/ecommerce-ui/components/FormComponents/TextFieldElement.tsx b/packages/ecommerce-ui/components/FormComponents/TextFieldElement.tsx
@@ -43,23 +43,21 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
       control={control}
       rules={validation}
       defaultValue={defaultValue}
-      render={({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => (
+      render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
         <TextField
           {...rest}
-          name={name}
-          value={value ?? ''}
+          {...field}
           onChange={(ev) => {
             onChange(
               type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value,
             )
             rest.onChange?.(ev)
           }}
-          onBlur={onBlur}
+          inputRef={ref}
           required={required}
           type={type}
           error={Boolean(error) || rest.error}
           helperText={error ? error.message : rest.helperText}
-          inputRef={ref}
         />
       )}
     />