From bfb9cefe7278d3b3e56f6afee4fd98d8a00e7f4d Mon Sep 17 00:00:00 2001
From: Jesse van der Poel <jessevdpoel@hotmail.com>
Date: Tue, 13 Feb 2024 16:56:22 +0100
Subject: [PATCH 1/7] Focus checkbox if invalid and form is submitted.

---
 .../components/FormComponents/CheckboxElement.tsx            | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx b/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
index b2188951ac..a00d629fee 100644
--- a/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
+++ b/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
@@ -17,6 +17,7 @@ import {
   SxProps,
   Theme,
 } from '@mui/material'
+import { useRef } from 'react'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
   parseError?: (error: FieldError) => string
@@ -42,12 +43,15 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
+  const checkboxRef = useRef<HTMLInputElement>(null)
+
   return (
     <Controller
       name={name}
       rules={rules}
       control={control}
       render={({ field: { value, onChange }, fieldState: { invalid, error } }) => {
+        if (invalid) checkboxRef.current?.focus()
         const parsedHelperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -60,6 +64,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                 label={label || ''}
                 control={
                   <Checkbox
+                    inputRef={checkboxRef}
                     {...rest}
                     color={rest.color || 'primary'}
                     sx={{

From 258872264b94c74a6100f2977bfdcd4054468770 Mon Sep 17 00:00:00 2001
From: Jesse van der Poel <jessevdpoel@hotmail.com>
Date: Tue, 13 Feb 2024 16:57:34 +0100
Subject: [PATCH 2/7] Changed order of props

---
 .../ecommerce-ui/components/FormComponents/CheckboxElement.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx b/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
index a00d629fee..834161236f 100644
--- a/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
+++ b/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
@@ -64,8 +64,8 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                 label={label || ''}
                 control={
                   <Checkbox
-                    inputRef={checkboxRef}
                     {...rest}
+                    inputRef={checkboxRef}
                     color={rest.color || 'primary'}
                     sx={{
                       ...(Array.isArray(sx) ? sx : [sx]),

From 7ef7dc7631f61a2feba67a531a210df9c22fed4b Mon Sep 17 00:00:00 2001
From: Jesse van der Poel <jessevdpoel@hotmail.com>
Date: Tue, 13 Feb 2024 16:58:51 +0100
Subject: [PATCH 3/7] added changeset

---
 .changeset/eight-flowers-heal.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eight-flowers-heal.md

diff --git a/.changeset/eight-flowers-heal.md b/.changeset/eight-flowers-heal.md
new file mode 100644
index 0000000000..dc8db35799
--- /dev/null
+++ b/.changeset/eight-flowers-heal.md
@@ -0,0 +1,5 @@
+---
+"@graphcommerce/ecommerce-ui": minor
+---
+
+Invalid checkboxes are now focussed

From c07dadb35982dd61dbc9baff42252b0d568fc0b8 Mon Sep 17 00:00:00 2001
From: Jesse van der Poel <jessevdpoel@hotmail.com>
Date: Wed, 14 Feb 2024 09:33:38 +0100
Subject: [PATCH 4/7] changed the ref

---
 .../components/FormComponents/CheckboxElement.tsx         | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx b/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
index 834161236f..a9a5bb990b 100644
--- a/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
+++ b/packages/ecommerce-ui/components/FormComponents/CheckboxElement.tsx
@@ -17,7 +17,6 @@ import {
   SxProps,
   Theme,
 } from '@mui/material'
-import { useRef } from 'react'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
   parseError?: (error: FieldError) => string
@@ -43,15 +42,12 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
-  const checkboxRef = useRef<HTMLInputElement>(null)
-
   return (
     <Controller
       name={name}
       rules={rules}
       control={control}
-      render={({ field: { value, onChange }, fieldState: { invalid, error } }) => {
-        if (invalid) checkboxRef.current?.focus()
+      render={({ field: { value, onChange, ref }, fieldState: { invalid, error } }) => {
         const parsedHelperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -65,7 +61,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                 control={
                   <Checkbox
                     {...rest}
-                    inputRef={checkboxRef}
+                    inputRef={ref}
                     color={rest.color || 'primary'}
                     sx={{
                       ...(Array.isArray(sx) ? sx : [sx]),

From 81e1e5b57977c0751fc28ec33e8da668a2f24177 Mon Sep 17 00:00:00 2001
From: Jesse van der Poel <jessevdpoel@hotmail.com>
Date: Mon, 19 Feb 2024 13:52:34 +0100
Subject: [PATCH 5/7] updated changeset

---
 .changeset/eight-flowers-heal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/eight-flowers-heal.md b/.changeset/eight-flowers-heal.md
index dc8db35799..5ca3561501 100644
--- a/.changeset/eight-flowers-heal.md
+++ b/.changeset/eight-flowers-heal.md
@@ -1,5 +1,5 @@
 ---
-"@graphcommerce/ecommerce-ui": minor
+'@graphcommerce/ecommerce-ui': patch
 ---
 
 Invalid checkboxes are now focussed

From 72658999d789cd9089a2b182b7633a326b07aedf Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Mon, 19 Feb 2024 14:48:01 +0100
Subject: [PATCH 6/7] CheckboxElement, MultiSelectElement, NumberFieldElement,
 SelectElement, SliderElement and TextFieldElement have their inputRef passed,
 allowing focus to be set by the form.

---
 .changeset/eight-flowers-heal.md              |  2 +-
 .../FormComponents/CheckboxElement.tsx        |  8 ++--
 .../FormComponents/MultiSelectElement.tsx     | 38 +++++++++----------
 .../FormComponents/NumberFieldElement.tsx     |  8 ++--
 .../FormComponents/SelectElement.tsx          |  5 +--
 .../FormComponents/SliderElement.tsx          |  9 +----
 .../FormComponents/TextFieldElement.tsx       |  8 ++--
 7 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/.changeset/eight-flowers-heal.md b/.changeset/eight-flowers-heal.md
index 5ca3561501..3d513d836f 100644
--- a/.changeset/eight-flowers-heal.md
+++ b/.changeset/eight-flowers-heal.md
@@ -2,4 +2,4 @@
 '@graphcommerce/ecommerce-ui': patch
 ---
 
-Invalid checkboxes are now focussed
+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
index a9a5bb990b..913cb6a85b 100644
--- 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, ref }, 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,6 +62,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                 control={
                   <Checkbox
                     {...rest}
+                    {...field}
                     inputRef={ref}
                     color={rest.color || 'primary'}
                     sx={{
@@ -69,9 +71,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                     }}
                     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
index 11998bdd59..4a325b5576 100644
--- 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,6 +102,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
             )}
             <Select
               {...rest}
+              {...field}
               id={rest.id || `select-multi-select-${name}`}
               multiple
               label={label || undefined}
@@ -109,7 +110,6 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
               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
index 454de2e83e..45955cbc22 100644
--- 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
index 6c86e0b9f1..899f4874a3 100644
--- 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,8 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
         return (
           <TextField
             {...rest}
-            name={name}
             value={value ?? ''}
-            onBlur={onBlur}
+            {...field}
             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
index f691e576bb..ec438ad9e4 100644
--- 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
index 553deaddba..e7251b49fd 100644
--- 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}
         />
       )}
     />

From dc4e77afd750bad703b79804d11355990f828d71 Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Mon, 19 Feb 2024 14:53:39 +0100
Subject: [PATCH 7/7] Missing ref

---
 .../ecommerce-ui/components/FormComponents/SelectElement.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ecommerce-ui/components/FormComponents/SelectElement.tsx b/packages/ecommerce-ui/components/FormComponents/SelectElement.tsx
index 899f4874a3..ce4aea3416 100644
--- a/packages/ecommerce-ui/components/FormComponents/SelectElement.tsx
+++ b/packages/ecommerce-ui/components/FormComponents/SelectElement.tsx
@@ -49,6 +49,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
             {...rest}
             value={value ?? ''}
             {...field}
+            inputRef={ref}
             onChange={(event) => {
               let item: number | string | O | undefined = event.target.value
               if (type === 'number') item = Number(item)