Switch from react-aria-menubutton to <select/>

src/components/Toolbar.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import OpenIcon from 'react-icons/lib/md/open-in-browser'
@@ -72,6 +71,22 @@ class ToolbarLinkHighlighted extends React.Component {
   }
 }
 
+class ToolbarSelect extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    wdKey: PropTypes.string
+  }
+
+  render() {
+    return <div
+      className='maputnik-toolbar-select'
+      data-wd-key={this.props.wdKey}
+    >
+      {this.props.children}
+    </div>
+  }
+}
+
 class ToolbarAction extends React.Component {
   static propTypes = {
     children: PropTypes.node,
@@ -195,34 +210,19 @@ export default class Toolbar extends React.Component {
             <IconText>Style Settings</IconText>
           </ToolbarAction>
 
-          <Wrapper
+          <ToolbarSelect wdKey="nav:inspect">
-            className='map-state-menu'
+            <ViewIcon/>
-            onSelection={(val) => this.handleSelection(val)}
+            <IconText>View </IconText>
-          >
+            <select onChange={(e) => this.handleSelection(e.target.value)}>
-            <Button wdKey="nav:settings" className="maputnik-toolbar-action">
+              {views.map((item) => {
-              <ViewIcon/>
+                return (
-              <IconText>View: {currentView.title}</IconText>
+                  <option value={item.id}>
-            </Button>
+                    {item.title}
-            <Menu>
+                  </option>
-              <ul className="map-state-menu__menu">
+                );
-                {views.map((item) => {
+              })}
-                  return (
+            </select>
-                    <li key={item.id}>
+          </ToolbarSelect>
-                      <MenuItem value={item.id}>
-                        <button
-                          className="maputnik-toolbar-action"
-                        >
-                          {item.icon}
-                          <IconText>{item.title}</IconText>
-                        </button>
-                      </MenuItem>
-                    </li>
-                  );
-                })}
-              </ul>
-            </Menu>
-          </Wrapper>
-
 
           <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
             <HelpIcon />

src/styles/_toolbar.scss

@@ -92,6 +92,16 @@
   @extend .maputnik-toolbar-link;
 }
 
+.maputnik-toolbar-select {
+  background: inherit;
+  border-width: 0;
+  @extend .maputnik-toolbar-link;
+}
+
+.maputnik-toolbar-select select {
+  margin-left: 4px;
+}
+
 .maputnik-icon-text {
   padding-left: $margin-1;
 }

test/functional/modals/index.js

@@ -100,7 +100,7 @@ describe("modals", function() {
         "geojson:example"
       ]));
 
-      browser.click(wd.$("nav:inspect"));
+      browser.setValue(wd.$("nav:inspect", "select"), "inspect");
     })
   })
 

test/functional/screenshots/index.js

@@ -83,7 +83,7 @@ describe('screenshots', function() {
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:inspect"))
+    browser.setValue(wd.$("nav:inspect", "select"), "inspect");
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/inspect.png")