fix(DropdownMenu): Fixes dropdown menu when using items as children. (p…

…atternfly#1219) fix 1218
redallen · Jan 18, 2019 · 279a595 · 279a595
1 parent e4b2653
commit 279a595
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 48 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js
@@ -118,34 +118,31 @@ class DropdownMenu extends React.Component {
 
   render() {
     const { className, isOpen, position, children, component: Component, openedOnEnter, ...props } = this.props;
-    let menu = null;
-    if (Component === 'div') {
-      menu = (
-        <DropdownContext.Consumer>
-          {onSelect => (
-            <Component
-              {...props}
-              className={css(
-                styles.dropdownMenu,
-                position === DropdownPosition.right && styles.modifiers.alignRight,
-                className
-              )}
-              hidden={!isOpen}
-              onClick={event => onSelect && onSelect(event)}
-            >
-              {this.extendCustomChildren()}
-            </Component>
-          )}
-        </DropdownContext.Consumer>
-      );
-    } else if (Component === 'ul') {
-      menu = (
-        <DropdownArrowContext.Provider
-          value={{
-            keyHandler: this.keyHandler,
-            sendRef: this.sendRef
-          }}
-        >
+
+    return (
+      <DropdownArrowContext.Provider
+        value={{
+          keyHandler: this.keyHandler,
+          sendRef: this.sendRef
+        }}
+      >
+        {Component === 'div' ? (
+          <DropdownContext.Consumer>
+            {onSelect => (
+              <ul
+                className={css(
+                  styles.dropdownMenu,
+                  position === DropdownPosition.right && styles.modifiers.alignRight,
+                  className
+                )}
+                hidden={!isOpen}
+                onClick={event => onSelect && onSelect(event)}
+              >
+                <Component {...props}>{this.extendCustomChildren()}</Component>
+              </ul>
+            )}
+          </DropdownContext.Consumer>
+        ) : (
           <Component
             {...props}
             className={css(
@@ -158,10 +155,9 @@ class DropdownMenu extends React.Component {
           >
             {this.extendChildren()}
           </Component>
-        </DropdownArrowContext.Provider>
-      );
-    }
-    return menu;
+        )}
+      </DropdownArrowContext.Provider>
+    );
   }
 }
 

diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap
@@ -145,21 +145,24 @@ exports[`KebabToggle basic 1`] = `
       isOpen={true}
       position="left"
     >
-      <div
-        aria-labelledby="Dropdown Toggle"
+      <ul
         className="pf-c-dropdown__menu"
         hidden={false}
         onClick={[Function]}
       >
         <div
-          className="pf-c-dropdown__menu-item"
-          key=".0"
-          onKeyDown={[Function]}
-          tabIndex={-1}
+          aria-labelledby="Dropdown Toggle"
         >
-          BASIC
+          <div
+            className="pf-c-dropdown__menu-item"
+            key=".0"
+            onKeyDown={[Function]}
+            tabIndex={-1}
+          >
+            BASIC
+          </div>
         </div>
-      </div>
+      </ul>
     </DropdownMenu>
   </div>
 </Dropdown>
@@ -1966,21 +1969,24 @@ exports[`dropdown basic 1`] = `
       isOpen={true}
       position="left"
     >
-      <div
-        aria-labelledby="Dropdown Toggle"
+      <ul
         className="pf-c-dropdown__menu"
         hidden={false}
         onClick={[Function]}
       >
         <div
-          className="pf-c-dropdown__menu-item"
-          key=".0"
-          onKeyDown={[Function]}
-          tabIndex={-1}
+          aria-labelledby="Dropdown Toggle"
         >
-          BASIC
+          <div
+            className="pf-c-dropdown__menu-item"
+            key=".0"
+            onKeyDown={[Function]}
+            tabIndex={-1}
+          >
+            BASIC
+          </div>
         </div>
-      </div>
+      </ul>
     </DropdownMenu>
   </div>
 </Dropdown>