• Preview
• Installation
• Properties
• Usage examples
• Building
• Linking in another local project
• Tests
• Contributing
• Known bugs
• TodoList

This component requires 3 peer dependencies :

• react
• react-dom
• material-ui

... so make sure they are installed in your project.

yarn add material-ui-superselectfield

import SelectField from 'material-ui-superselectfield'

import SelectField from 'material-ui-superselectfield/es'

if multiple is set, value must be at least an empty Array.
For single value mode, you can set value to null.
When using objects, make sure they expose a non-null value property.
PropTypes should raise warnings if implementing otherwise.

(values, hintText) => {
   if (!values) return hintText
   const { value, label } = values
   if (Array.isArray(values)) {
      return values.length
         ? values.map(({ value, label }) => label || value).join(', ')
         : hintText
   }
   else if (label || value) return label || value
   else return hintText
}

Check the CodeExampleX.js provided in the repository.

You can build the project with :

git clone https://github.com/Sharlaan/material-ui-superselectfield.git
yarn && yarn start

It should open a new page on your default browser @ localhost:3000

To test changes on a local build of SSF :

yarn build && yarn link

... then navigate into your local project directory, and type :

yarn link material-ui-superselectfield

/!\ Warning : if you reinstall dependencies in your project, this will break the link, you will have to re-link SSF.

yarn test

Please follow these steps :

• Fork the repo, then pull the forked repo locally.
• Make your changes. Note: use incremental changes with atomic commits.
• Add unit tests for any new or changed functionality.
• Lint and test your code. Note: lint is automatically run before each commit, and test on prepush.
• Add comments to explain critical or potentially hard to understand code and tests.
• Once everything linted, tested and commented, push to your repo.
• In original repo, click on New pull request button, then click on compare across forks, then in head fork button choose your forked repo.
• Explain the PR, and check any potential conflicts before saving.
• [ADMIN ONLY] Check, make comments/suggestions and eventually merge the PR.
• [ADMIN ONLY] make a release on Master branch with npm version patch|minor|major --git-tag-version MUIv0.x|MUIv1 then push. Note : NWB will automatically publish it upon detecting the version bump in package.json.

• keyboard-focus handling combined with optgroups and autocompleted results

• implement select all and reset, for multiple mode

• implement onClose handler for multiple mode, to allow registering selected values in oneshot instead of exposing values at each selection (ie one single server request)

• set autoWidth to false automatically if width prop has a value

• add a css rule for this.root :focus { outline: 'none' }, and :hover { darken }

• add tests for focus states/styles when tabbing between multiple superSelectFields

• add tests for keystrokes

• add proptypes checking for value and children

• support of <optgroup />

• implement selectable <optgroup /> to select all inner children

• check rendering performance with 200 MenuItems (integrate react-infinite)

• implement the container for errors (absolutely positioned below the focusedLine)

  Expose more props :

  • noMatchFound message
  • floatingLabelText
  • canAutoPosition
  • checkPosition
  • anchorOrigin
  • popoverStyle
  • hoverColor
  • disabled
  • required
  • errorMessage
  • errorStyle
  • classeNames for sub-components
  • maxSelection

• add props.disableAutoComplete (default: false), or a nbItems2showAutocomplete (default: null, meaning never show the searchTextField)

• make Autocomplete appears only if current numberOfMenuItems > props.autocompleteTreshold

• implement a checkboxRenderer for MenuItem (or expose 2 properties CheckIconFalse & CheckIconTrue)

• make a PR reimplementing MenuItem.insetChildren replaced with checkPosition={'left'(default) or 'right'}

• add an example with GooglePlaces

• add an example with ReduxForm