From e1d865434ea08e6c7f6225b2a52292e48dc54b04 Mon Sep 17 00:00:00 2001
From: Mariano Perdomo <mperdomo@blockchain.com>
Date: Thu, 6 Jul 2023 17:35:56 -0300
Subject: [PATCH] fix(kyc): dropdown fields now don't overlap with inputs

---
 .../src/components/Form/FormItem/index.js             | 11 ++++++-----
 .../KycVerification/ExtraFields/template.success.tsx  |  8 ++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/FormItem/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/FormItem/index.js
index e9d324a1ddd..a52f3345172 100644
--- a/packages/blockchain-wallet-v4-frontend/src/components/Form/FormItem/index.js
+++ b/packages/blockchain-wallet-v4-frontend/src/components/Form/FormItem/index.js
@@ -1,15 +1,16 @@
 import React from 'react'
 import styled from 'styled-components'
 
+// Z-INDEX because otherwise the dropdown menu will be behind other inputs when present
 const Wrapper = styled.div`
   position: relative;
   width: ${(props) => props.width || '100%'};
-`
 
-const FormGroup = (props) => {
-  const { children, ...rest } = props
+  div.bc__menu {
+    z-index: 900;
+  }
+`
 
-  return <Wrapper {...rest}>{children}</Wrapper>
-}
+const FormGroup = ({ children, ...rest }) => <Wrapper {...rest}>{children}</Wrapper>
 
 export default FormGroup
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/template.success.tsx
index e10f4ae163a..edc4a393cdd 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/template.success.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/template.success.tsx
@@ -266,7 +266,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
       title: getFormattedMessageComponent(node.id)
     }
     return (
-      <FormGroup>
+      <FormGroup key={node.id}>
         <QuestionTitle>{nodeTranslation.title}</QuestionTitle>
 
         <QuestionDescription>{nodeTranslation.instructions}</QuestionDescription>
@@ -311,7 +311,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
 
     return (
       <>
-        <FormGroup>
+        <FormGroup key={node.id}>
           <QuestionTitle>{nodeTranslation.title}</QuestionTitle>
 
           <QuestionDescription>{nodeTranslation.instructions}</QuestionDescription>
@@ -391,7 +391,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
     }
 
     return (
-      <FormGroup>
+      <FormGroup key={node.id}>
         <QuestionTitle>{nodeTranslation.title}</QuestionTitle>
 
         {displayInstructions && (
@@ -461,7 +461,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
     const isOptional = node.children && node.children.some((item) => item.id.includes('UNDEFINED'))
 
     return (
-      <FormGroup>
+      <FormGroup key={node.id}>
         <QuestionTitle>
           {nodeTranslation.title !== '' ? nodeTranslation.title : node.text}
         </QuestionTitle>