Bug 1474234 - Don't pass internal props onto child button in MenuButton; r=jdescottes Otherwise we will get errors like: console.error: "Warning: React does not recognize the `menuId` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `menuid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.\n in button (created by MenuButton)\n in MenuButton (created by ToolboxToolbar)\n in div (created by ToolboxToolbar)\n in div (created by ToolboxToolbar)\n in ToolboxToolbar (created by ToolboxController)\n in ToolboxController" console.error: "Warning: React does not recognize the `menuPosition` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `menuposition` instead. If you accidentally passed it from a parent component, remove it from the DOM element.\n in button (created by MenuButton)\n in MenuButton (created by ToolboxToolbar)\n in div (created by ToolboxToolbar)\n in div (created by ToolboxToolbar)\n in ToolboxToolbar (created by ToolboxController)\n in ToolboxController" console.error: "Warning: React does not recognize the `menuOffset` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `menuoffset` instead. If you accidentally passed it from a parent component, remove it from the DOM element.\n in button (created by MenuButton)\n in MenuButton (created by ToolboxToolbar)\n in div (created by ToolboxToolbar)\n in div (created by ToolboxToolbar)\n in ToolboxToolbar (created by ToolboxController)\n in ToolboxController" It's also not what we intend to do. Differential Revision: https://phabricator.services.mozilla.com/D2640

--- a/devtools/client/shared/components/menu/MenuButton.js
+++ b/devtools/client/shared/components/menu/MenuButton.js
@@ -12,16 +12,25 @@ const PropTypes = require("devtools/clie
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const Services = require("Services");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { button } = dom;
 const {
   HTMLTooltip,
 } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
 
+// Return a copy of |obj| minus |fields|.
+const omit = (obj, fields) => {
+  const objCopy = { ...obj };
+  for (const field of fields) {
+    delete objCopy[field];
+  }
+  return objCopy;
+};
+
 class MenuButton extends PureComponent {
   static get propTypes() {
     return {
       // The document to be used for rendering the menu popup.
       doc: PropTypes.object.isRequired,
 
       // An optional ID to assign to the menu's container tooltip object.
       menuId: PropTypes.string,
@@ -261,17 +270,19 @@ class MenuButton extends PureComponent {
     //
     // Bug 1472942: Do this for all users of HTMLTooltip.
     const menu = ReactDOM.createPortal(
       this.props.children,
       this.tooltip.panel
     );
 
     const buttonProps = {
-      ...this.props,
+      // Pass through any props set on the button, except the ones we handle
+      // here.
+      ...omit(this.props, Object.keys(MenuButton.propTypes)),
       onClick: this.onClick,
       "aria-expanded": this.state.expanded,
       "aria-haspopup": "menu",
       ref: this.setButtonRef,
     };
 
     if (this.state.expanded) {
       buttonProps.onKeyDown = this.onKeyDown;