Repository: couds/react-bulma-components (js)

Issue:
Menu List Item - hover active state does not work if using elements
I have a component like this.

```
      <Menu
        className="share-admin-menu"
        style={{
          backgroundColor: 'white',
          padding: '20px',
          color: 'white',
          width: '200px',
        }}
      >
        <Menu.List title={username} className="share-admin-menu__title">
          <Menu.List.Item
            active={active === 'edit'}
            onClick={this.onEditClick}>
              <div className="share-admin-menu__edit-container mb-one">
                <p className="share-admin-menu__text-option">
                  Edit
                </p>
                <Icon
                  className="debut-icon debut-icon--pointer ml-one"
                  icon="IconPencil"
                  color="#518DCA"
                />
              </div>
          </Menu.List.Item>
          <Menu.List.Item
            active={active === 'delete'}
            onClick={this.onDeleteClick}>
              <div className="share-admin-menu__delete-container mb-one">
                <p className="share-admin-menu__text-option">Delete</p>
                <Icon
                  className="debut-icon debut-icon--pointer ml-one"
                  icon="IconTrash"
                  color="#EA1D64"
                />
              </div>
            </Menu.List.Item>
          <Menu.List.Item
            active={active === 'detail'}
            onClick={this.onFollowersClick}>
            <div className="share-admin-menu__go-to-container">
              <p className="share-admin-menu__text-option">Go to Share</p>
              <Icon
                className="debut-icon debut-icon--pointer ml-one"
                icon="IconGo"
                color="#3ac569"
              />
            </div>
          </Menu.List.Item>
        </Menu.List>
      </Menu>
```

which renders out this...

![Screenshot of Opera (3-19-19, 12-10-57 PM)](https://user-images.githubusercontent.com/8473884/54622493-0ee8a200-4a40-11e9-9b10-85e4346c42d8.png)

Visually it looks good but i lose the ability of the hover and active state.  Is there a work around for this?


Pull request:
List items containing custom children will now be styled correctly
Content inside `list-item` must be wrapped with an `<a>` anchor or the list item will not be styled correctly.  

Closes #169 

Patch:
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
index e68bdb1..c6fb8f4 100644
--- a/src/components/dropdown/dropdown.js
+++ b/src/components/dropdown/dropdown.js
@@ -10,7 +10,7 @@ import Icon from '../icon';
 import modifiers from '../../modifiers';
 import Element from '../element';
 
-const colors = [null].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key]));
+const colors = [null].concat(Object.values(CONSTANTS.COLORS));
 
 export default class Dropdown extends PureComponent {
   static Item = DropdownItem;
@@ -36,7 +36,7 @@ export default class Dropdown extends PureComponent {
     ...modifiers.defaultProps,
     className: undefined,
     renderAs: 'div',
-    domRef: React.createRef(),
+    domRef: undefined,
     style: undefined,
     value: undefined,
     children: [],
@@ -47,6 +47,11 @@ export default class Dropdown extends PureComponent {
     label: undefined,
   }
 
+  constructor(props) {
+    super(props);
+    this.domRef = props.domRef || React.createRef();
+  }
+
   state = {
     open: false,
   }
@@ -61,7 +66,7 @@ export default class Dropdown extends PureComponent {
 
   close = (evt) => {
     // IDK yet how to test using the ref in enzime
-    if (this.props.hoverable || (evt && this.props.domRef && this.props.domRef.current.contains(evt.target))) {
+    if (this.props.hoverable || (evt && this.domRef && this.domRef.current.contains(evt.target))) {
       return;
     }
     this.setState({ open: false });
@@ -118,6 +123,7 @@ export default class Dropdown extends PureComponent {
     return (
       <Element
         {...props}
+        domRef={this.domRef}
         className={classnames('dropdown', className, {
           'is-active': this.state.open,
           'is-up': up,
diff --git a/src/components/menu/components/list/components/item.js b/src/components/menu/components/list/components/item.js
index f8ddacd..10f5b7e 100644
--- a/src/components/menu/components/list/components/item.js
+++ b/src/components/menu/components/list/components/item.js
@@ -13,17 +13,7 @@ const MenuListItem = ({
   domRef: ref,
   ...props
 }) => {
-  if (typeof children === 'string') {
-    return (
-      <li ref={ref}>
-        <Element className={classnames(className, { 'is-active': active })} {...props}>
-          {children}
-        </Element>
-      </li>
-    );
-  }
-
-  if (React.Children.only(children).type === List) {
+  if (typeof children !== 'string' && React.Children.toArray(children).length === 1 && React.Children.only(children).type === List) {
     const child = React.Children.only(children);
     return (
       <li ref={ref}>
@@ -37,7 +27,9 @@ const MenuListItem = ({
 
   return (
     <li ref={ref}>
-      {children}
+      <Element className={classnames(className, { 'is-active': active })} {...props}>
+        {children}
+      </Element>
     </li>
   );
 };


Test patch:
diff --git a/src/components/menu/__test__/__snapshots__/menu.test.js.snap b/src/components/menu/__test__/__snapshots__/menu.test.js.snap
index 6559ea2..cd5d161 100644
--- a/src/components/menu/__test__/__snapshots__/menu.test.js.snap
+++ b/src/components/menu/__test__/__snapshots__/menu.test.js.snap
@@ -48,34 +48,36 @@ exports[`Menu component Should concat Menu.List to display as submenus 1`] = `
       </a>
     </li>
     <li>
-      <li>
-        <a
-          className="is-active"
-        >
-          Manage Your Team
-        </a>
-        <ul
-          className="menu-list"
-        >
-          <li>
-            <a>
-              Members
-            </a>
-          </li>
-          <li>
-            <a
-              className="is-active"
-            >
-              Plugins
-            </a>
-          </li>
-          <li>
-            <a>
-              Add a member
-            </a>
-          </li>
-        </ul>
-      </li>
+      <a>
+        <li>
+          <a
+            className="is-active"
+          >
+            Manage Your Team
+          </a>
+          <ul
+            className="menu-list"
+          >
+            <li>
+              <a>
+                Members
+              </a>
+            </li>
+            <li>
+              <a
+                className="is-active"
+              >
+                Plugins
+              </a>
+            </li>
+            <li>
+              <a>
+                Add a member
+              </a>
+            </li>
+          </ul>
+        </li>
+      </a>
     </li>
   </ul>
 </aside>
@@ -120,13 +122,17 @@ exports[`Menu component Should render custom item child 1`] = `
     className="menu-list"
   >
     <li>
-      <p>
-        Custom children 1
-      </p>
+      <a>
+        <p>
+          Custom children 1
+        </p>
+      </a>
     </li>
     <li>
       <a>
-        Custom children 2
+        <a>
+          Custom children 2
+        </a>
       </a>
     </li>
   </ul>