Merge pull request #5929 from blockchain/GROWUX-1112

fix(kyc): dropdown fields now don't overlap with inputs
blockchain · Jul 6, 2023 · c9ad0f1 · c9ad0f1
2 parents 47db9ea + e1d8654
commit c9ad0f1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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/...wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/template.success.tsx b/...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>