sharlaan/material-ui-superselectfield

multiselection autocomplete dropdown component for Material-UI

material-ui-superSelectField

Table of Contents

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

Preview (Live demo)

Installation

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

ES5 version

import SelectField from 'material-ui-superselectfield'

ES6+ version

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

Properties

Name	Type	Default	Description
anchorOrigin	object	{ vertical: 'top', horizontal: 'left' }	Anchor position of the menu, accepted values: top, bottom / left, right
autocompleteFilter	function	see below	Provide your own filtering parser. Default: case insensitive. The search field will appear only if there are more than 10 children (see showAutocompleteThreshold). By default, the parser will check for label props, 'value' otherwise.
canAutoPosition	bool	true	If present, this property allows the inner Popover component to position the menu in such way options are not hidden by the screen edges.
checkPosition	string		Position of the checkmark in multiple mode. Accepted values: '', left, right
children	any	[]	Datasource is an array of any type of nodes, styled at your convenience. /!\ REQUIRED: each node must expose a value property. This value property will be used by default for both option's value and label. A label property can be provided to specify a different value than value.
disabled	bool	false	Include this property to disable superSelectField.
elementHeight	number, number[]	36	Height in pixels of each option element. If elements have different heights, you can provide them in an array.
errorText	string or node	''	Include this property to show an error warning.
floatingLabel	string or node		The content to use for the floating label element.
hintText	string	'Click me'	Placeholder text for the main selections display.
hintTextAutocomplete	string or node	'Type something'	Placeholder text for the autocomplete.
keepSearchOnSelect	bool	false	Prevents the autocomplete field's value to be reset after each selection.
multiple	bool	false	Include this property to turn superSelectField into a multi-selection dropdown. Checkboxes will appear.
name	string		Required to differentiate between multiple instances of superSelectField in same page.
nb2show	number	5	Number of options displayed from the menu.
noMatchFound	node	'No match found'	Placeholder text / node when the autocomplete filter fails.
openImmediately	bool	false	Makes the menu opened on page load.
onAutoCompleteTyping	function	() => {}	Exposes the word typed in AutoComplete. Useful for triggering onType API requests.
onChange	function	() => {}	Triggers when closing the menu. Use this if you do not want to update your component state with each selection and only on menu close. signature: (selectedValues, name) with selectedValues array of selected values based on selected nodes' value property, and name the value of the superSelectField instance's name property
onMenuOpen	function	() => {}	Triggers when opening the Menu.
onSelect	function	() => {}	Triggers when selecting an item in the menu. Use this to update your componenet state with each selection from the menu (while still open). signature: (selectedValues, name) with selectedValues array of selected values based on selected nodes' value property, and name the value of the superSelectField instance's name property
showAutocompleteThreshold	number, 'always', 'never'	10	Maximum number of options from which to display the autocomplete search field. For example, if autoComplete textfield needs to be disabled, just set this prop with a value higher than children length. However, if you need the autocomplete to show always, you may pass 'always'. This will open the menu even if there are no items to display. Passing 'never' will never show the autocomplete regadless of how many children are passed.
useLayerForClickAway	bool	false	If true, the popover dropdown will render on top of an invisible layer, which will prevent clicks to the underlying elements, and trigger an onRequestClose('clickAway') call.
value	null, object, object[]	null	Selected value(s). /!\ REQUIRED: each object must expose a 'value' property.
withResetSelectAllButtons	bool	false	Paired with 'multiple', shows an header containing the 'RESET' and 'SELECT ALL' buttons.

Note when setting value

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.

Styling properties

Name	Type	Default	Description
autocompleteStyle	object		Allows to change the styles of the auto-complete field (inner input component). Notice: margins left/right and width of the autocomplete root element are not customisable, (automatically calculated)
autocompleteUnderlineStyle	object		Allows to change the styles of the searchTextField's underline.
autocompleteUnderlineFocusStyle	object		Allows to change the styles of the searchTextField's underline when focused.
checkedIcon	SVGicon	see below	The SvgIcon to use for the checked state. This is useful to create icon toggles.
dropDownIcon	SVGicon	see below	The SvgIcon to use for the drop down icon in the select.
errorStyle	object	{color: 'red'}	Allows to change the style of error message's container. Will resolve only if errorText is defined.
floatingLabelStyle	object		Allows to change the styles of the floating label.
floatingLabelFocusStyle	object		Allows to change the styles of the floating label when focused.
innerDivStyle	object	{}	Styles applied to the inner div of MenuItems hosting each of your children components.
hoverColor	string	'rgba(69, 90, 100, 0.1)'	Overrides the hover background color.
menuStyle	object	{}	Styles applied to the comtainer which will receive your children components.
menuGroupStyle	object	{}	Styles applied to the MenuItems hosting your <optgroup/>.
menuFooterStyle	object	{}	Styles applied to the Menu's footer.
menuCloseButton	node		A button for an explicit closing of the menu. Useful on mobiles.
noMatchFoundStyle	object	{}	Allows to change the style of the noMatchFound list item.
popoverClassName	string	''	Sets the className property of the Popover component.
popoverWidth	number	180	Sets the width of the Menu. The menu is the container for 4 main sub-components: the autocomplete textfield, the header for reset/selectAll buttons, the options container, and the footer. The menu width will always set its width to the highest value between popoverWidth prop(in px) or the root component width. The default value 180px were chosen so that the header's inner buttons don't overflow.
resetButton	node	see below	Node used to deselect all options. /!\ Requires withResetSelectAllButtons.
selectAllButton	node	see below	Node used to select all options. /!\ Requires withResetSelectAllButtons.
selectedMenuItemStyle	object		Styles to be applied to the selected MenuItem.
selectionsRenderer	function	see below	Provide your own renderer for selected options. Defaults to concatenating children's values text. Check CodeExample4 for a more advanced renderer example.
style	object	{}	Insert your own inlined styles, applied to the root component.
unCheckedIcon	SVGicon	see below	The SvgIcon to use for the unchecked state. This is useful to create icon toggles.
underlineErrorStyle	object	{borderColor: 'red'}	Allows to change the style of the underline in error state. Will resolve only if errorText is defined.
underlineFocusStyle	object		Allows to change the styles of the underline when focused.
underlineStyle	object		Allows to change the styles of the underline.

Default functions

Name	Default function
autocompleteFilter	`(searchText, text) => !text
checkedIcon	<CheckedIcon style={{ top: 'calc(50% - 12px)' }} />
dropDownIcon	<DropDownArrow/>
resetButton	<FlatButton label='reset' hoverColor='rgba(69, 90, 100, 0.1)' fullWidth />
selectAllButton	<FlatButton label='select all' hoverColor='rgba(69, 90, 100, 0.1)' fullWidth labelStyle={{ whiteSpace: 'nowrap' }} />
unCheckedIcon	<UnCheckedIcon style={{ top: 'calc(50% - 12px)' }} />
selectionsRenderer

(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
}

Usage

Check the CodeExampleX.js provided in the repository.

Building

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

Linking in another local project

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.

Tests

yarn test

Contributing

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.

Known bugs

• keyboard-focus handling combined with optgroups and autocompleted results

TodoList

• 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

material-ui-superselectfield's Issues

Styling issue

Hello

great work with this component!

I incorporated SuperSelectField into my project and noticed few quirks:

• blue border, font not matching the rest of MUI components:
  
• still selectable when disabled:
  

To make sure this has nothing to do with my setup i spun up an empty create-react-app project and created above recordings. Am I missing something obvious?

Doesn't work when count of children less than 2

Sometimes needs to add only one or zero items to the children (one or zero items to the optgroup). Your code fails on this situation.

Problems on lines
https://github.com/Sharlaan/material-ui-superselectfield/blob/master/lib/SuperSelectField.js#L452
https://github.com/Sharlaan/material-ui-superselectfield/blob/master/lib/SuperSelectField.js#L558
etc.

Example code

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import SuperSelectField from 'material-ui-superselectfield/lib/SuperSelectField'

ReactDOM.render(
  <MuiThemeProvider>
    <div>
      <SuperSelectField>
        <span value={'A'} >A</span>
      </SuperSelectField>
    </div>
  </MuiThemeProvider>,
  document.getElementById('root')
);

or example with one optgroup

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import SuperSelectField from 'material-ui-superselectfield/lib/SuperSelectField'

ReactDOM.render(
  <MuiThemeProvider>
    <div>
      <SuperSelectField multiple>
        <optgroup label="A">
          <span value={'A1'} >A1</span>
          <span value={'A2'} >A2</span>
        </optgroup>
      </SuperSelectField>
    </div>
  </MuiThemeProvider>,
  document.getElementById('root')
);

This happens because children in this case is a single object but not an array how you expect.

[Feature] Icon menu?

Should we add the ability to have an Icon Menu?

Unable to change data

We are attempting to use two select fields, one to select states and another to select counties. The state select field is pre-populated, that is, it just always has the list of 50 states.

The list of counties is initially blank. Depending on the state the user selects, the list of counties would then get populated only with the counties from the state(s) that are selected.

The issue is, this doesn't work. If we give see a select field a blank list, and then later update it with a list of children, it doesn't update and no options appear in the drop-down. Here is the select field in the render function():

<SuperSelectField
    name="Hi"
    hintText="Testing..."
    multiple
    checkPosition='left'
    selectionsRenderer={this.handleCustomDisplaySelections}>

    {this.state.items}

  </SuperSelectField>

Initially, this.state.items is set to:

        var items = [];
        return items;

Then, we change the list after 3 seconds:

componentDidMount = () => {
        window.setTimeout(() => {

            var items = [];
            items.push(<div key="Hello" value="Hello">Hello</div>);
            items.push(<div key="Again" value="Again">Again</div>);

            this.setState({
                items: items
            })
            console.log('updated')
        }, 3000);
    };

There is no error in the console, but the control will not allow us to select anything. It just doesn't work, the drop-down never opens.

If, instead, I populate the select field initially with some data like this:

        var items = [];
        items.push(<div key="Hi" value="Hi">Hi</div>);
        items.push(<div key="World" value="World">World</div>);
        return items;

Then it works. So I would see the two options 'Hi' and 'World' in the drop-down, and then after 3 seconds, I see the 'Hello' and 'Again' options.

So giving the select field a blank list, and then later populating it with data does not work. The expected behavior, of course, is that the drop down gets the new values when they are specified.

Error when press down key on autocomplete

The problem: when I focus on autocomplete field, start to type and try to select one option with the "down" key then I got an error.

I didn't check your code to see if it is easy to fix, if it is easy please let me know and I can try to create one PR later.

The error

Uncaught TypeError: Cannot read property 'focus' of null
    at SelectField.focusFirstMenuItem (http://localhost:3000/packages/modules.js?hash=6f7dc802871c7fc63f971c313c5e423ce70405ca:59695:20)
    at SelectField._this.handleTextFieldKeyDown 

The code with problem

key: 'focusFirstMenuItem',                                                                                         // 376
    value: function focusFirstMenuItem() {                                                                             // 377
      var firstMenuItem = (0, _reactDom.findDOMNode)(this.menu).querySelector('[tabindex="0"]');                       // 378
      ---> firstMenuItem.focus();                                                                                           // 379
    }   

My component

<SuperSelectField
                    name="brokersToFilter"
                    multiple
                    hintText="digite a corretora..."
                    onChange={this.handleFilterChange}
                    selectionsRenderer={this.handleCustomDisplaySelections('brokersToFilter', 'Todas as Corretoras')}
                    value={this.state.brokersToFilter}>
                    {this.brokersList()}
                </SuperSelectField>



    brokersList = () => {
        return this.state.brokers.map((broker, index) => {
            return (
                <div key={index} value={broker._id} label={Utils.shortName(broker.name)}>
                    <span style={{fontWeight: 'bold'}}>{Utils.shortName(broker.name)}</span>
                </div>
            )
        })
    }

    onRequestDelete = (key, name) => e => {
        e.preventDefault()
        this.updateState({[name]: this.state[name].filter((v, i) => i !== key)})
    }

    handleCustomDisplaySelections = (name, text) => values => values.length
        ? <div style={{display: 'flex', flexWrap: 'wrap'}}>
            {values.map(({label, value: country}, index) =>
                <Chip key={index} style={{margin: 5}} onRequestDelete={this.onRequestDelete(index, name)}>
                    {label}
                </Chip>
            )}
        </div>
        : <div style={{minHeight: 42, lineHeight: '42px', fontSize: 0.8 + 'rem', marginLeft: 10 + 'px'}}>{text}</div> // advice: use one of <option>s' default height as min-height

Passing properties to menu wrapper

Is there a way to pass properties (classname / id etc) to the menu wrapper? I can pass styles to the menu directly but these don't affect the outer container.

I'm trying to work around the issue with the dropdown hanging off the screen.

Any help appreciated! :)
Rob

errorText property not working.

<SuperSelectField
showAutocompleteThreshold={1}
useLayerForClickAway={true}
hintText=''
errorText={touched && error}
floatingLabel={label}
value={selectedObj || 1}
nb2show={10}
onChange={ (e, name) => changeSelectedObj(e, name)}
style={{ minWidth: 200, margin: 10, paddingTop:30 }}
hoverColor='rgba(3, 169, 244, 0.15)'
menuCloseButton={<RadioButton label='close' hoverColor={'lightSalmon'} />}
>
{ options ? optionsList : ''}

  </SuperSelectField>

Showing scroll bar while start typing in filter text-box.

I am facing scrollbar issue while start typing in "Type something" text-box.

How can SuperSelectField be used with redux-form?

Does anyone know how is it posible to use Super Select Field with redux-form?

I have tried adapting a wrapper using the code redux-form-material-ui uses to create components but i have not managed to make it work.

What i have tried so far is rendering a redux-form field:

<Field name='Accesosrios__c' component={SuperSelectFieldWrapper} multiple hintText='Accesorios'> {this.props.accesorios.map((val, i) => { console.log('en map ', val) return ( <div key={'acc_'+i} value={val}>{val}</div> ) })} </Field>

Using the next component Wrapper:

`
import SuperSelectField from 'material-ui-superselectfield'
import { Component, createElement } from 'react'

/**
 * Creates a component class that renders the given Material UI component
 *
 * @param MaterialUIComponent The material ui component to render
 * @param mapProps A mapping of props provided by redux-form to the props the Material UI
 * component needs
 */
function createComponent(MaterialUIComponent, mapProps) {
  class InputComponent extends Component {
    getRenderedComponent() {
      return this.refs.component
    }

    render() {
      return createElement(MaterialUIComponent, {
        ...mapProps(this.props),
        ref: 'component'
      })
    }
  }
  InputComponent.displayName = `ReduxFormMaterialUI${MaterialUIComponent.name}`
  return InputComponent
}

const mapError = ({ meta: { touched, error, warning } = {}, input: { ...inputProps }, ...props }, errorProp = 'errorText') =>
  touched && (error || warning) ? { ...props, ...inputProps, [errorProp]: error || warning } : { ...inputProps, ...props }


export default createComponent(
  SuperSelectField,
  ({ input: { onChange,value, onBlur, ...inputProps }, onChange:onChangeFromField, ...props }) => ({
    ...mapError(props),
    ...inputProps,
    value: value,
    onChange: (event, index, value) => {
      onChange(value)
      if(onChangeFromField) {
        onChangeFromField(value)
      }
    },
    onBlur: () => onBlur(value)
  }))

`

And i get the next error:

Performance issue

Thanks for this awesome component. I have one question :

SuperSelect is really really slow if used with large data set. I have a use case where I need to display 38K items in super select. But Select popover opening and other actions like selections are terribly slow?

I know I can implement Auto Complete, instead of showing all options; but that is not a choice here.

Any suggestions?

Can't set open field by default.

There is no option to set the SuperSelect open field by default. (there seems to be no option for that in the props)
Say like so
<SupserSelect isOpen={true | false }/>

it seems to trigger closing the menu on click of empty space. Is this a known issue or I'm getting something wrong. ready to submit a PR for this if this is an issue

Material UI moved some components

Hi this is my first time using this and I encountered a few issues where the module cannot be found and I couldn't continue... So I decided to try and find the correct modules in material-ui directory. I have yet to test all as I said I am using it for the first time.

Previous
var _Popover = require('material-ui/Popover/Popover');
New
var _Popover = require('material-ui/internal/Popover');

Previous
var _checkBoxOutlineBlank = require('material-ui/svg-icons/toggle/check-box-outline-blank');
New
var _checkBoxOutlineBlank = require('material-ui/svg-icons/check-box-outline-blank');

Not quite sure:
Previous
var _arrowDropDown = require('material-ui/svg-icons/navigation/arrow-drop-down');
New
var _arrowDropDown = require('material-ui/svg-icons/arrow-downward');

Previous
var _check = require('material-ui/svg-icons/navigation/check');
New
var _check = require('material-ui/svg-icons/check-box');

Hope you will update to support the newest material-ui... I realise they are updating their directories frequently which is causing alot of issues with other repos.

Best Regards

react-tap-event-plugin requires ^2.x, but React and ReactDOM ^15.x supported - these are not compatible

This is a simple one and a suggestion (see comment as it might be completely unnecessary as I've been inundated and haven't been able to dig into all the upgrades I've wanted to do to our packages):

react-tap-event-plugin ^2.x is exclusively for react and react-dom (addons etc) at ^15.4.2, and is 100% incompatible with react 15.3.2 (the prior version).

So, by accepting react at 15.x, the range for react-tap-event-plugin should be 1.x to 2.x, as it was before when it was "^1.x || ^2.x"

The solution (in my opinion) is NOT to enforce react 15.4.2 and higher because not everyone is ready to make the jump quite yet. Jumping to 15.4.2 requires bumping Material UI to a higher version than 16.1.0, but they are having significant issues with higher versions right now. Specifically, some of their onTouchTaps are not working, and things like dropdowns are broken. We discovered this when trying to do an upgrade last week to higher versions.

So, what should happen is: 1) continue to allow for a wide range of React 15.x and 2) go back to allowing a range of react-tap-event-plugin so 1.x and 2.x are allowed.

I am currently using 1.5.1 of this package with react-tap-event-plugin at 1.0.0 and everything works really well! So, I know from first-hand knowledge consuming the package that other than the "warning" there is no issue!

Basically.. this would just get rid of the warning for people not ready to upgrade that one package.

Can we open popover on the top of textbox when not enough space at the bottom side

I am using supperselectfield inside the table row I am facing problem at the last row when opening drop-down it get hidden behind of my container. same if I check Material UI select it get open at the top when not enough space at the bottom side can we implement same here.

NPM version module needs to be updated

Hi there,

Could you please update the npm version from 1.5.3 to the latest code (1.6.0)

Thanks

How to disable the field

Hi.

I'm trying to use your great component.
I want to switch the state of the field (enable or disable).
Is it possible to disable the field?

Please check below.
I would like to set "disabled" prop.

        <SuperSelectField
          name='state1'
          hintText='Single value'
          onChange={this.handleSelection}
          value={state1}
          style={{ minWidth: 150, marginRight: 40 }}
          disabled={true}
        >
          <div value='A'>Option A</div>
          <div value='B'>Option B</div>
          <div value='C'>Option C</div>
        </SuperSelectField>

Thanks.

Webpack CaseSensitivePathsPlugin throws error

I'm using create-react-app, which in turn is using the Webpack CaseSensitivePathsPlugin, which gets upset if (as it sounds) the path required does not match the path on disk in a case-sensitive manner.

I'm getting the following error:

'MY_PATH/node_modules/material-ui-superselectfield/lib/superSelectField.js` does not match the corresponding path on disk `SuperSelectField.js`.

Manually changing main in package.json to lib/SuperSelectField.js fixes the problem. However, every time I run an NPM command the change is reverted and the problem comes back.

Probably related to issue #4!

package.json points to non existent superSelectField.js (case sensitive)

Hi there nice piece of work! keep at it :)

npm install is failing due to

[email protected] prepublish: `babel src/superSelectField.js -o lib/superSelectField.js`

your repo has the file but it starts with an upperCase.

Add dataSourceConfig to specify values format.

Hey guys!

What do you think about adding this feature? I'm thinking about similar prop to dataSourceConfig prop from MaterialUI AutoComplete

Cannot customize TextField, NoMatchFound item's style

I need to customize some of the elements of SuperSelectField, but do not have control over it.
It can be done if following properties are exposed:
• title property of main div
• style property of TextField
• style property of noMatchFound ListItem

Also observed one tabbing issue: SuperSelectField gets focused through tabbing even when it is disabled. If I change main div tabIndex to "tabIndex={disabled ? '-1' : '0'}" then this issue is not observed

Is possible to customize the message 'No match found' on autocomplete?

Hello, I looked into the code and I couldn't find a way to customize the message 'No match found'.

Is that possible? If it is not possible, can I submit a PR for that?

I'm from Brazil and my app is target to Brazilians then I need to use Portuguese in every message.

Thanks.

use with asynchronous data

Anyone using this component with asynchronous data? That is searching a database for example in response to a change to the autocomplete filter and generating new children? I haven't had any luck.

Render issue: dropdown list briefly shows up before jumping to correct position [Win, chrome/firefox)

Hi, great component!

I recently discovered a new bug, which has not been there in previous versions. When clicking on a superselect field, the dropdown list blinks up on the left edge or left top corner of the page before it gets correctly rendered below the select field.

This can be seen in Example 4 as well. (link not accessable directly, go here and select Options Grouping)

Can we perhaps hide it with opacity:0 before it gets positioned by script?

Autocomplete field is not created with React 16

On focus an error occurs here:
var input = (0, _reactDom.findDOMNode)(this.searchTextField).getElementsByTagName('input')[0];

Debugger shows that this.searchTextField is undefined.

BREAKING ISSUE: Miss Spelling

There is a miss-spelling in the package.json lib/super* vs lib/Super*; this is breaking eslint and making some application unable to deploy that have strict checks.

Reference:
import-js/eslint-plugin-import#761 (comment)

Line to Fix:
https://github.com/Sharlaan/material-ui-superselectfield/blob/master/package.json#L16

Sometimes popover doesn't open in responsive mode.

Hi!
Thank you for your working on this component.
I found an issue, sometimes popover doesn't open on iOs devices.
I am attaching a video to better understanding, it's made using simulator of iPad,
also I checked on my iPhone 5s and I have the same problem.
https://drive.google.com/file/d/0BxlOr_77VhUTanY0c2ljTUl2cmc/view
I found the problem, we just need to prevent default event in handleClick function.
Here is a video with added event.preventDefault();
https://drive.google.com/file/d/0BxlOr_77VhUTb2s0THVrRU9LSEk/view

I think the reason is material-ui Popover call onRequestClose.
Please take a look to "Note" in http://www.material-ui.com/#/components/popover
Environment:
chrome: 57.0.2987.133 (64-bit) responsive mode
OS: macOS Siera 10.12

Error when try to display page

When i go to localost:3000 i see the following message

Failed to compile.

Error in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: 'react/lib/EventPluginHub' in /home/josenavarro/workspace/t1/material-ui-superSelectField/node_modules/react-tap-event-plugin/src

 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37

Error in safari (and probably other browsers): TypeError: Object.entries is not a function

The error is:

TypeError: Object.entries is not a function. (In 'Object.entries(t)', 'Object.entries' is undefined)
SuperSelectField.js:19

You can see it here: https://sharlaan.github.io/example3

It only occurs when there are 2 or more instances of SuperSelectField on a page.

It looks like object.entries has limited browser support, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Browser_compatibility

So there are probably issues in IE and Safari/IE on mobile devices as well.

floatingLabel animation not working.

floatingLabel should be up on field focus and down on focus out. Its working fine with multiple selections, but not in case of single selection.

Button or something for the user to click when the selection (multiple) is finished

Hello @Sharlaan, we don't have any place for the user click when he finishes to select the values he wants.

Would be good to have a place (button, link, label) like Close or Finish for the user to click because in the multi select is confusing how the user can get out of it, on a mobile device is worst because we don't have a lot of space.

What do you think about that?

Another option is just to provide a callback for onOpen and onClose and with that we can show something for the user or not on our own.

Let me know what you think about it.

Thanks

selectionsRenderer doesn't have label

Label is missing from the selectionsRenderer function

we have

options={
   segments.map((p) => (
      <div value={p.id} key={p.id} label={p.name}>
        {p.name}
      </div>
    ))
}

And the label works for the autocomplete perfectly but when the values are rendered it is showing value not label

I tried adding this function

const renderSelected = (values, hintText) => {
  console.log(values, hintText);
  if (!values || !values.length) return hintText;
  const { value, label } = values;
  if (Array.isArray(values)) return values.map((v) => v.label || v.value).join(', ');
  else if (label || value) return label || value;
  return hintText;
};

but when i console.log(values) there is no label key

OnChange attribute remove selectedItems

Whenever I specify the onChange parameter the selected value isn't displayed in the SelectionsPresenter
<SuperSelectField name='state31' floatingLabel='اختر بلد' onChange={(selectedValues,name) => {this.props.checkValid(selectedValues , name)}} hintText='' elementHeight={58} style={{ width: 300, marginTop: 20, marginRight: 40 }} >
By removing the onChange everything goes back to normal...
Any Ideas?

Close handler

Is there merit in adding a close handler for multiple selection cases? In my case I would prefer to wait until multiple selection is done (closed state) then update the results...

autoCloseWhenOffScreen with Mobile device

I faced an issue when my virtual mobile keyboard cover all the popover. So any solution to add some item in my list. what you can do is (line 558) :

material-ui-superselectfield/src/SuperSelectField.js

Line 562 in f08529d

<Popover

<Popover
          open={this.state.isOpen}
          anchorEl={this.root}
          canAutoPosition={canAutoPosition}
          anchorOrigin={anchorOrigin}
	  targetOrigin={{vertical: 'bottom',horizontal:'left'}} // ==> Or make it on props
          useLayerForClickAway={false}
          onRequestClose={this.closeMenu}
	  autoCloseWhenOffScreen={false} // ===> Or make it on props
          style={popoverStyle || { height: popoverHeight }} // ===> Add a popoverStyle to keep a min height for the popup
        >

Now my popup come from bottom to top and never close when mobile keyboard showing up.
You're superselectfield is really great thx you 👍

Error in CodeExample3 with "Raphaël"

In the CodeExample3 if you select Raphaël and others and the go back to the SuperSelectField Raphaël is not marked in the menu as selected but still apearing in the selectedRednerer.

You can't remove him after you selected him once and you are able to add him multiple times.

The pre selected values show up in the Text Field but are not selected when the dropdown menu opens up.

Hi Sharlaan,
Great work.
I have been using it for last 1 month and wotks great. Now I have a requirement where I need to show a list of pre-seleced elements. The user can select more or deselect any of the select ones.

The pre selected values do show up in the Text Field but are not selected when the dropdown menu opens up.
Is this a bug?

Regards
Abhishek

Custom renderer for Menu Footer

Addding a close button is possible but could we make a section where we can render custom buttons like reload, add, order etc..?

In my case every select field (actually everything) comes from a REST API. Because some selectfields are in a List that is editable it would make a request every time a list item is rendered. To avoid this the component that uses SuperSelectField checks on componentWillMount if the datasource for it is loaded or emtpy. If it is empty it just makes the request.

This brings me to my problem now. There are selectfields witch datasource changes during application usage. With the abowe solution the datasource will stay as it is until the user makes a logout and login witch clears the state.

I know that I could put a button alongside the SuperSelectField but I think that buttons inside it would make it mutch more user-friendly. The user will see that a item is missing only if he is already in the list. It just makes more sense that the reload button would be near the list.

Also a add button would make sense. If some items are still missing after the reload the user would see that he needs to add the item he wants.

To avoid styling changes or button usage types there could be just a part on the list bottom that is free to render how you want. That part would only render if you send custom render node, function, object ...what every you want to use.

@Sharlaan what do you think about this?

onChange is not getting Triggers when selecting/unselecting an option.

Trying to make MultiSelction AutoComplete tag field. Exactly like Example 3. Got stuck in onRequestDelete.

<MaterialSelectField
showAutocompleteThreshold={1}
hintText=''
multiple={true}
checkPosition="left"
errorText={touched && error}
floatingLabel={label}
value={selectedArr}
children={selectedArr}
nb2show={7}
onChange={(selected, name) => handleOnChange(selected, name)}
required={true}
style={{ minWidth: 200, margin: 10, paddingTop: 30 }}
selectionsRenderer = {handleCustomDisplaySelections}
>
{ optionsList }

let selectedArr = [];
const handleRequestDelete = (key, items) => (e) => {
var newArr = selectedArr.slice(0);
newArr.splice(key, 1);
selectedArr = newArr.slice(0);
};

const handleCustomDisplaySelections = (item, values) => {
return

{selectedArr.length ?

<div style={{ display: 'flex', flexWrap: 'wrap' }}>
{selectedArr.map(({ label, value: value }, index) =>
<Chip key={index} style={{ margin: 5 }} onRequestDelete={handleRequestDelete(index, selectedArr)}>
{label}

)}

: ''
}
;
};

How do I install

Hello!,
I've loved it!, how do I install it? I didn't see it on npm. Are you planning to do that soon?

;)

SelectionPresenter displaying labels

When presenting the values, it's usually required to display the labels, instead of the values. Don'thave time for a pull request, but basically (inside SelectField render method):

  let presenterValue = []

    const menuItems = children &&
      children.map((child, index) => {
        if (!autocompleteFilter(this.state.searchText, child.props.label)) return
        const isSelected = value.includes(child.props.value)
        if (isSelected) {
          presenterValue.push(child.props.label)
        }
        return (
          <MenuItem
            key={index}
            tabIndex={index}
            value={child.props.value}
            checked={multiple && isSelected}
            leftIcon={(multiple && !isSelected) ? <UnCheckedIcon /> : null}
            primaryText={child}
            disableFocusRipple
          />)
      })

Then, SelectionPresenter becomes:

<SelectionsPresenter
          disabled={disabled}
          hintText={hintText}
          value={presenterValue.length > 0 ? presenterValue.join(', ') : value}
          displaySelectionsRenderer={displaySelectionsRenderer}
        />

how to hide autocomplete

how can i hide the autocomplete input???

List not rendering completely even with a small data set

I am using superselectfield with redux-form to show a dropdown with autocomplete of around 80-100 items. It works fine when scroll position of the dropdown is on top.
But when I scroll through the list only 3-4 options are visible on top.
And it gets worse the more I scroll down; it decreases to only 1-2 items being visible.

Any suggestions on how to fix this.

Use the correct basename on the demo website.

When on a particular example, the URL displayed in the browser is https://sharlaan.github.io/example1 when it should be https://sharlaan.github.io/material-ui-superselectfield/example1.

For example, in react router, it's solved using basename

This issue makes sharing examples harder.

Doesn't work in Internet Explorer 11 & Firefox

There seems to styling issues with Internet Explorer 11 and Firefox. On Chrome it seems to work just fine.

Firefox:

1. The underline is pushed to the right.

Internet Explorer 11

1. The underline is pushed to the right, and
2. Clicking on the drop down doesn't show the list of items.

Firefox Preview:

Internet Explorer Preview:

how to handle onClick - question.

Hi,
my main problem is that I need to fetch the list only if a user is trying to open the selection list.
Currently it's possible to do so only on componentDidMount. But in my case there is like 50 superselectfields and all of them should fetch the data - so some kind of brute force happening.

Could you explain the clear way to do so?
Attributes like onClick, onFocus, onTap does not works.

Port to material Next branch

Upgrade to 1.5.0 results in module not found error

Something with the build for 1.5.0 has broken the ability for the package to be found inside of node_modules.

Prior to 1.5.0 (working on something with it yesterday actually, on 1.1.0):
import SuperSelectField from 'material-ui-superselectfield'; -- this was working just fine.

Now, after updating to 1.5.0, it cannot find the file. I looked into node_modules and I think I see the issue.

In 1.1.0, the file structure for the built version was: material-ui-superselectfield > lib > SuperSelectField.js

Now, in 1.5.0, the file structure for the built version is: material-ui-superselectfield > lib > {empty directory}, but the root directory has a file called lib\SuperSelectField.js

So, node/npm have no idea how to resolve this path. The paths expected are root > lib > file, so if the file is not there, things blow up.

I have not poked around enough yet to know what was changed that caused this.

Unable to move the modal dropdown select menu

I have used this component severally on a page and the last item on the dropdown modal is cutting off. I already have enough padding at the bottom of the page, so adding more is out of the question. I would like to move the modal up a bit more. I see you have an anchorOrigin method but the default for vertical is top and just to be sure, I also added that to my component (with no change in effect as expected).

Please what can I do to resolve this?

How to style the autocomplete?

How can I style the autocomplete "search bar"?

Can't resolve babel-polyfill

Issue only present in 1.5.6. 1.5.5 is fine.

ERROR in ./node_modules/material-ui-superselectfield/lib/SuperSelectField.js
Module not found: Error: Can't resolve 'babel-polyfill' in '[path]/node_modules/material-ui-superselectfield/lib'
@ ./node_modules/material-ui-superselectfield/lib/SuperSelectField.js 21:0-25
[rest of stacktrace in my project]
webpack: Failed to compile.