feat(Dropdown): handle keyboard navigation and styling for Link child…

…ren (patternfly#1201)
redallen · Jan 16, 2019 · 0996cfd · 0996cfd
1 parent 2bf5b55
commit 0996cfd
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 5 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
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import styles from '@patternfly/patternfly-next/components/Dropdown/dropdown.css';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
@@ -61,7 +62,10 @@ class DropdownItem extends React.Component {
     } else if (event.key === 'ArrowDown') {
       this.props.context.keyHandler(this.props.index, 'down');
     } else if (event.key === 'Enter') {
-      this.ref.current.click && this.ref.current.click();
+      if (!this.ref.current.getAttribute) ReactDOM.findDOMNode(this.ref.current).click();
+      else {
+        this.ref.current.click && this.ref.current.click();
+      }
     }
   };
 
@@ -97,7 +101,14 @@ class DropdownItem extends React.Component {
                     isHovered && styles.modifiers.hover,
                     className
                   )} ${child.props.className}`,
-                  ref: this.ref
+                  ref: this.ref,
+                  onKeyDown: this.onKeyDown,
+                  onClick: event => {
+                    if (!isDisabled) {
+                      if (Component === 'button') onClick && onClick(event);
+                      onSelect && onSelect(event);
+                    }
+                  }
                 })
               )
             ) : (

diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js
@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 import { componentShape } from '../../internal/componentShape';
 import { DropdownPosition, DropdownContext, DropdownArrowContext } from './dropdownConstants';
+import ReactDOM from 'react-dom';
 
 const propTypes = {
   /** Anything which can be rendered as dropdown items */
@@ -52,7 +53,9 @@ class DropdownMenu extends React.Component {
       this.keyHandler(nextIndex, position, custom);
     } else {
       custom
-        ? this.refsCollection[`item-${nextIndex}`].current.focus()
+        ? (this.refsCollection[`item-${nextIndex}`].current.focus &&
+            this.refsCollection[`item-${nextIndex}`].current.focus()) ||
+          ReactDOM.findDOMNode(this.refsCollection[`item-${nextIndex}`].current).focus()
         : this.refsCollection[`item-${nextIndex}`].focus();
     }
   };
@@ -61,13 +64,16 @@ class DropdownMenu extends React.Component {
     if (this.props.openedOnEnter) {
       if (this.props.component === 'ul') this.refsCollection['item-0'].focus();
       else {
-        this.refsCollection['item-0'].current.focus();
+        (this.refsCollection['item-0'].current.focus && this.refsCollection['item-0'].current.focus()) ||
+          ReactDOM.findDOMNode(this.refsCollection['item-0'].current).focus();
       }
     }
   }
 
   sendRef = (index, node, isDisabled) => {
-    if (isDisabled || node.getAttribute('role') === 'separator') {
+    if (!node.getAttribute) {
+      this.refsCollection[`item-${index}`] = ReactDOM.findDOMNode(node);
+    } else if (isDisabled || node.getAttribute('role') === 'separator') {
       this.refsCollection[`item-${index}`] = null;
     } else {
       this.refsCollection[`item-${index}`] = node;
@@ -86,6 +92,11 @@ class DropdownMenu extends React.Component {
     const mappedChildren = React.Children.map(this.props.children, (child, index) => {
       const mappedChild = React.cloneElement(child, {
         ref: React.createRef(),
+        className: `${css(
+          child.props.isDisabled && styles.modifiers.disabled,
+          child.props.isHovered && styles.modifiers.hover,
+          styles.dropdownMenuItem
+        )}${child.props.className ? child.props.className : ''}`,
         tabIndex: -1,
         onKeyDown: event => {
           if (event.key === 'Tab') return;

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
@@ -14,6 +14,19 @@ exports[`KebabToggle basic 1`] = `
   line-height: 1.5;
   background-color: transparent;
 }
+.pf-c-dropdown__menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  text-align: left;
+  white-space: nowrap;
+  text-decoration: none;
+  background-color: #ededed;
+}
 .pf-c-dropdown__menu {
   display: block;
   position: absolute;
@@ -139,6 +152,7 @@ exports[`KebabToggle basic 1`] = `
         onClick={[Function]}
       >
         <div
+          className="pf-c-dropdown__menu-item"
           key=".0"
           onKeyDown={[Function]}
           tabIndex={-1}
@@ -1813,6 +1827,19 @@ exports[`dropdown basic 1`] = `
   line-height: 1.5;
   background-color: transparent;
 }
+.pf-c-dropdown__menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  text-align: left;
+  white-space: nowrap;
+  text-decoration: none;
+  background-color: #ededed;
+}
 .pf-c-dropdown__menu {
   display: block;
   position: absolute;
@@ -1945,6 +1972,7 @@ exports[`dropdown basic 1`] = `
         onClick={[Function]}
       >
         <div
+          className="pf-c-dropdown__menu-item"
           key=".0"
           onKeyDown={[Function]}
           tabIndex={-1}