Add menuId prop to allow passing of ID to dropdown menu (#375)

* Add menuId prop to allow passing of ID to dropdown menu

* Revert package-lock.json

src/components/dropdown/__test__/dropdown.test.js

@@ -178,4 +178,12 @@ describe('Dropdown component', () => {
     );
     expect(component.find('span').text()).toEqual('Item');
   });
+  it('Should pass specified ID to the menu component', () => {
+    const component = shallow(
+      <Dropdown menuId="test-id">
+        <Dropdown.Item value="value">Item</Dropdown.Item>
+      </Dropdown>,
+    );
+    expect(component).toMatchSnapshot();
+  });
 });

src/components/dropdown/dropdown.js

@@ -22,6 +22,7 @@ const Dropdown = ({
   icon,
   domRef,
   disabled,
+  menuId,
   ...props
 }) => {
   const ref = useRef(domRef);
@@ -101,12 +102,17 @@ const Dropdown = ({
           });
         }}
       >
-        <Button disabled={disabled} color={color}>
+        <Button
+          disabled={disabled}
+          color={color}
+          aria-haspopup
+          aria-controls={menuId}
+        >
           <span>{current}</span>
           {icon}
         </Button>
       </div>
-      <div className="dropdown-menu" id="dropdown-menu" role="menu">
+      <div className="dropdown-menu" id={menuId} role="menu">
         <div className="dropdown-content">{childrenArray}</div>
       </div>
     </Element>
@@ -174,13 +180,15 @@ Dropdown.propTypes = {
    */
   icon: PropTypes.node,
   /**
-   * Additional CSS classes to pass to `<Dropdown />`.
-   * They will sit alongside pre-applied bulma classes.
+   * Specify the id of the menu component.
+   * Default is "dropdown-menu".
    */
+  menuId: PropTypes.string,
 };
 
 Dropdown.defaultProps = {
   closeOnSelect: true,
+  menuId: 'dropdown-menu',
 };
 
 export default Dropdown;

src/components/dropdown/index.d.ts

@@ -14,6 +14,7 @@ interface DropdownProps<T> {
   align?: 'right';
   icon?: React.ReactNode;
   disabled?: boolean;
+  menuId?: string;
 }
 
 interface DropdownItemProps<T> {