SLDS Menus -> PickList: close Dropdown after selecting an Item

[cosminnicula]

In the https://www.lightningdesignsystem.com/components/menus#picklist example, if you select an item, the Dropdown is not closed.

One way that you could achieve this behavior would be to extend the PickList and override the itemSelected function like this:

import React from 'react';
import PickList from 'ui/components/picklists/index.react';
const PT = React.PropTypes;

class MyPickList extends PickList {
  constructor(props) {
    super(props);
  }
  itemSelected (item) {
    super.toggleHidden();
    super.itemSelected(item);
  }
}
module.exports = MyPickList;

Then, you could consume the component like this:

import React from 'react';
import Menu from 'ui/components/menus/index.react';
import componentUtil from 'app_modules/ui/util/component';
import MyPickList from './MyPickList/index.react';
const pf = componentUtil.prefix;
const PT = React.PropTypes;

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className='demo-only demo-only--dropdown' style={{height: '240px'}}>
        <MyPickList label="Select an Option" aria-expanded={false}>
          <Menu className={pf('dropdown--left')}>
            <Menu.List>
              <Menu.Item href="#">Option A</Menu.Item>
              <Menu.Item href="#">Option B</Menu.Item>
              <Menu.Item href="#">Option C</Menu.Item>
              <Menu.Item href="#">Option D</Menu.Item>
              <Menu.Item href="#">Option E</Menu.Item>
              <Menu.Item href="#">Option F</Menu.Item>
              <Menu.Item href="#">Option G</Menu.Item>
              <Menu.Item href="#">Option H</Menu.Item>
              <Menu.Item href="#">Option I</Menu.Item>
              <Menu.Item href="#">Option J</Menu.Item>
              <Menu.Item href="#">Option K</Menu.Item>
              <Menu.Item href="#">Option L</Menu.Item>
            </Menu.List>
          </Menu>
        </MyPickList>
      </div>
    );
  }
}
module.exports = App;

Is there a better way to achieve this? Also, would you consider accepting a PR that would add this behavior inside the documentation website?

[rickschmoo]

These components are not intended for consumption outside the SLDS website.