From bd91faad865bb4c13a8f041ef172cad16b42f7c1 Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:11:38 -0500
Subject: [PATCH] fix(protocol-designer): set form field value if 1 option, add
 newLocation error (#17490)

In `DropdownStepFormField`, if the length of `options` passed in changes
to 1, we need to set the form field value for this component to the
single value

Closes RQA-3955
---
 .../src/molecules/DropdownStepFormField/index.tsx    | 12 ++++++++++++
 .../StepTools/__tests__/MagnetTools.test.tsx         |  9 +++++++++
 2 files changed, 21 insertions(+)

diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
index 54e79b0e520..30adc644467 100644
--- a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import {
@@ -79,6 +80,12 @@ export function DropdownStepFormField(
     }
   }
 
+  useEffect(() => {
+    if (options.length === 1) {
+      updateValue(options[0].value)
+    }
+  }, [options.length])
+
   return (
     <Flex padding={padding ?? SPACING.spacing16}>
       {options.length > 1 || options.length === 0 ? (
@@ -138,6 +145,11 @@ export function DropdownStepFormField(
               </Flex>
             </Flex>
           </ListItem>
+          {errorToShow != null ? (
+            <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.red50}>
+              {errorToShow}
+            </StyledText>
+          ) : null}
         </Flex>
       )}
     </Flex>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
index 7d5c250462e..7b0b70cccf9 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
@@ -59,6 +59,15 @@ describe('MagnetTools', () => {
           updateValue: vi.fn(),
           value: 'engage',
         },
+        moduleId: {
+          onFieldFocus: vi.fn(),
+          onFieldBlur: vi.fn(),
+          errorToShow: null,
+          disabled: false,
+          name: 'magnetAction',
+          updateValue: vi.fn(),
+          value: 'engage',
+        },
         engageHeight: {
           onFieldFocus: vi.fn(),
           onFieldBlur: vi.fn(),