FE-814 Use children instead of menu prop

SparkPost · Apr 9, 2020 · 76a4dcc · 76a4dcc
1 parent be21822
commit 76a4dcc
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/packages/matchbox/src/components/ComboBox/ComboBox.js b/packages/matchbox/src/components/ComboBox/ComboBox.js
@@ -20,12 +20,13 @@ function ComboBox(props) {
 
   // Clones children in order to pass the menu into the textfield
   // Textfield inserts the menu in the DOM directly after the input, before helptext and error
-  const menu = React.useMemo(() => getChild('ComboBoxMenu'), [children]);
-  const textfield = React.useMemo(() => getChild('ComboBoxTextField', { menu }), [children]);
+  const textfieldWithMenu = React.useMemo(() => {
+    return getChild('ComboBoxTextField', { children: getChild('ComboBoxMenu') });
+  }, [children]);
 
   return (
     <Box position="relative" ref={rootRef} style={style} {...rest}>
-      {textfield}
+      {textfieldWithMenu}
     </Box>
   );
 }

diff --git a/packages/matchbox/src/components/ComboBox/ComboBoxTextField.js b/packages/matchbox/src/components/ComboBox/ComboBoxTextField.js
@@ -24,14 +24,14 @@ function ComboBoxTextField(props) {
   const {
     autoFocus,
     disabled,
+    children,
     error,
     errorInLabel,
     helpText,
     id,
     itemToString,
     label,
     labelHidden,
-    menu,
     name,
     onChange,
     onFocus,
@@ -113,7 +113,7 @@ function ComboBoxTextField(props) {
         />
       </StyledInputWrapper>
       {/* Menu is rendered here so it is positioned correctly before error and helptext */}
-      {menu && menu}
+      {children}
       {error && !errorInLabel && <Error id={errorId} error={error} />}
       {helpText && <HelpText id={helpTextId}>{helpText}</HelpText>}
     </StyledWrapper>
@@ -123,14 +123,14 @@ function ComboBoxTextField(props) {
 ComboBoxTextField.propTypes = {
   autoFocus: PropTypes.bool,
   disabled: PropTypes.bool,
+  children: PropTypes.node,
   error: PropTypes.string,
   errorInLabel: PropTypes.bool,
   helpText: PropTypes.node,
   id: PropTypes.string.isRequired,
   itemToString: PropTypes.func,
   label: PropTypes.string,
   labelHidden: PropTypes.bool,
-  menu: PropTypes.node,
   name: PropTypes.string,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,