fix(Dropdown): Pass down ref for dropdown item (patternfly#1193)

* fix(Dropdown): Pass down ref for dropdown item * Add keys to dropdown items in toolbar demo
redallen · Jan 16, 2019 · 29e536f · 29e536f
1 parent 771df85
commit 29e536f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.js b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.js
@@ -96,7 +96,8 @@ class DropdownItem extends React.Component {
                     isDisabled && styles.modifiers.disabled,
                     isHovered && styles.modifiers.hover,
                     className
-                  )} ${child.props.className}`
+                  )} ${child.props.className}`,
+                  ref: this.ref
                 })
               )
             ) : (

diff --git a/packages/patternfly-4/react-core/src/demos/Toolbar/examples/ComplexToolbarDemo.js b/packages/patternfly-4/react-core/src/demos/Toolbar/examples/ComplexToolbarDemo.js
@@ -69,11 +69,13 @@ class ComplexToolbarDemo extends React.Component {
         position={DropdownPosition.right}
         toggle={<DropdownToggle onToggle={this.onDropDownToggle}>All</DropdownToggle>}
         isOpen={isDropDownOpen}
+        dropdownItems={[
+          <DropdownItem key="item-1">Item 1</DropdownItem>,
+          <DropdownItem key="item-2">Item 2</DropdownItem>,
+          <DropdownItem key="item-3">Item 3</DropdownItem>,
+          <DropdownItem isDisabled key="all">All</DropdownItem>
+        ]}
       >
-        <DropdownItem>Item 1</DropdownItem>
-        <DropdownItem>Item 2</DropdownItem>
-        <DropdownItem>Item 3</DropdownItem>
-        <DropdownItem isDisabled>All</DropdownItem>
       </Dropdown>
     );
   };
@@ -88,13 +90,15 @@ class ComplexToolbarDemo extends React.Component {
         toggle={<KebabToggle onToggle={this.onKebabToggle} />}
         isOpen={isKebabOpen}
         isPlain
-      >
-        <DropdownItem>Link</DropdownItem>
-        <DropdownItem component="button">Action</DropdownItem>
-        <DropdownItem isDisabled>Disabled Link</DropdownItem>
-        <DropdownItem isDisabled component="button">
-          Disabled Action
+        dropdownItems={[
+          <DropdownItem key="link">Link</DropdownItem>,
+          <DropdownItem component="button" key="action_button">Action</DropdownItem>,
+          <DropdownItem isDisabled key="disabled_link">Disabled Link</DropdownItem>,
+          <DropdownItem isDisabled component="button" key="disabled_button">
+            Disabled Action
         </DropdownItem>
+        ]}
+      >
       </Dropdown>
     );
   };

diff --git a/packages/patternfly-4/react-core/src/demos/Toolbar/examples/SimpleToolbarDemo.js b/packages/patternfly-4/react-core/src/demos/Toolbar/examples/SimpleToolbarDemo.js
@@ -68,11 +68,13 @@ class SimpleToolbarDemo extends React.Component {
         position={DropdownPosition.right}
         toggle={<DropdownToggle onToggle={this.onDropDownToggle}>All</DropdownToggle>}
         isOpen={isDropDownOpen}
+        dropdownItems={[
+          <DropdownItem key="item-1">Item 1</DropdownItem>,
+          <DropdownItem key="item2">Item 2</DropdownItem>,
+          <DropdownItem key="item-3">Item 3</DropdownItem>,
+          <DropdownItem isDisabled key="all">All</DropdownItem>
+        ]}
       >
-        <DropdownItem>Item 1</DropdownItem>
-        <DropdownItem>Item 2</DropdownItem>
-        <DropdownItem>Item 3</DropdownItem>
-        <DropdownItem isDisabled>All</DropdownItem>
       </Dropdown>
     );
   };
@@ -87,13 +89,15 @@ class SimpleToolbarDemo extends React.Component {
         toggle={<KebabToggle onToggle={this.onKebabToggle} />}
         isOpen={isKebabOpen}
         isPlain
+        dropdownItems={[
+          <DropdownItem key="link">Link</DropdownItem>,
+          <DropdownItem component="button" key="action-button">Action</DropdownItem>,
+          <DropdownItem isDisabled key="disabled-link">Disabled Link</DropdownItem>,
+          <DropdownItem isDisabled component="button" key="disabled-button">
+            Disabled Action
+          </DropdownItem>
+        ]}
       >
-        <DropdownItem>Link</DropdownItem>
-        <DropdownItem component="button">Action</DropdownItem>
-        <DropdownItem isDisabled>Disabled Link</DropdownItem>
-        <DropdownItem isDisabled component="button">
-          Disabled Action
-        </DropdownItem>
       </Dropdown>
     );
   };