teamwertarbyte/material-ui-chip-input

A chip input field using Material-UI.

material-ui-chip-input's Issues

Chip not added when Autocomplete open on load

Hi, The onRequestAdd callback is not fired when I select an item from the autocomplete menu for the first time but it works fine after that. Take a look at the following gif

My chipInput component is as follows

<MuiThemeProvider>
    <ChipInput
        value={value}
        dataSource={dataSource}
        onRequestAdd={onRequestAdd}
        onRequestDelete={onRequestDelete}
        openOnFocus={true}
        onUpdateInput={onUpdateInput}
        open
    />
</MuiThemeProvider>

I noticed that this issue happens only when the open prop is passed to ChipInput component. The open prop is not handled by ChipInput and is directly passed to AutoComplete component which will open it on load without requiring user focus. After investigating I found out that the ChipInput's this.autoComplete.handleItemTouchTap function is not being called and instead the Autocomplete's handleItemTouchTap function is called on first click. But on second click onwards, the ChipInput's handleItemTouchTap is called so it works fine.

Other info :-
react: 15.4
material-ui: 0.16.5
material-ui-chip-input: 0.11.2

Error when dataSource property is an array of objects instead of an array of strings

The following error poups up in console when dataSource prop is an array of objects, instead of array of strings.

Failed prop type: Invalid prop `dataSource[0]` of type `object` supplied to `ChipInput`, expected `string`.

When the error occurs, the chip input does not work as expected. The dropdown still appears and shows the text correctly but after selecting an element a chip does not show up in the ChipInput.

Example:

This causes error:

<ChipInput
    // Other props
    dataSource={ [{'text': 'Chip1', value: 1},  {'text': 'Chip2', value: 2}, ] }
/>

This does not:

<ChipInput
    // Other props
    dataSource={ ['Chip1', 'Chip2',] }
/>

Ideal Behavior

dataSource being array of objects should also work for ChipInput and not just array of strings. Since AutoComplete in mui allows array of objects, I expected similar behaviour here.

Filled and blurred floatingLabelText doesn't match opaque TextField labelColor

When muiTheme's labelColor is changed to an opaque color (with an opacity of anything other than 0.498039), a filled and blurred ChipInput's floating label no longer matches the label of a TextField in the same state. On Line 39, the floatingTextLabel color is faded when the label is filled and unfocused.

Here's an example with muiTheme.palette.labelColor: rgba(158, 158, 158, 1)

Is there a way to support label colors that aren't 50% transparent?

`underlineShow` property is not supported

Currently it's impossible to hide TextFieldUnderline element

style bug on safari

"-webkit-appearance: textfield" show border on safari.

Reset empty input's height

An image is better than words:

Looks like the input is taking unnecessary and ugly space ?

While at it, i noticed also when typing some search text, then exiting without selecting any option, the input still conserve the typed text instead of reseting onBlur ?

Add option to display chips under autocompletebox

I think it'll be useful if we can an option to display the chips under the input box instead of at the top as in cases when there are a lot of chips, the input keeps shifting down. it'll be nice to have the input stay at the top and the chips displayed under it. Take a look at the following pic.

This should be easy to do as we just need to change the order of components in the render method depending on a prop.

chip input and chip showing up on different lines

This is the chip input as shown on the demo page

But what I have shows up on different lines always.

And this is without any properties set on the chipInput. Not sure if this is an issue or I messed up, is this by design? If yes, how do I make it like the demo page?
Thanks!

[ControlledMode] selected chip appears as text

When in controlled mode (value property set with selectedValues string[]), onRequestAdd receives the selected string properly, but the TextField displays this string directly instead of converting it into a .

Auto open on focus bug/ feature

Hi,

I am having an issue with the control. I am using autocomplete with openonfocus for the Chipinput control and my expecetd behaviour is as soon as I select an option, it should open the dropdown automatically.
But what I see is once I select the option I need to click the mouse two times to open the dropdown, sometimes I need change the cursor position before clicking on it to open it. Basically once the user selects an option it should autofocus and keep the dropdownlist open since the user might want to select other options. Is this something that you can fix and also add this feature?

Thanks,
Tee

Floating label

Displaying selected value

Hi Chipinput team,

I am trying to display the selected values that comes from database by doing it this way.

<ChipInput
	fullWidth
	openOnFocus
	dataSource={props.dropdownlistdata}
	clearOnBlur={true}
	value={['test1','test2']}
	hintText="Try typing a..."
/>

1. It works fine in the sense that it displays the selected text specified in the value and also it does not have that option available anymore in the dropdownlist values which is perfect. But when I choose anything else from the dropdown nothing else is getting selected. Always the value of 'test1 and test2 is the thing that is getting selected.

2. The other thing is mine is a stateless component and the dropdownlist values comes from database from a master table and selected values comes from a transaction table. I don't think it is an issue, it is more of how can we achieve the preselected values from a different set of array and still have the dropdownlist values. your advise is much appreciated!

Can you please suggest?

leMaik: Slightly formatted the text and added numbers to the questions.

Handle `onPaste` with line breaks in text

I had a problem with users pasting data from spreadsheets to chip input and it creates one big chip with all values:

First workaround was to chip.split(' '), but it create another problem - when customers wanted to search by values with ' ' inside ("Firstname Lastname")

Second workaround:

const onChipRequestAdd = (...chips) =>  filter.mergeChips(chips)

<ChipInput
  onPaste={(event) => {
    event.preventDefault() // prevent default behavior
    onChipRequestAdd(...event.clipboardData.getData('Text').split('\n'))
  }
  hintText="Search"
  value={chips}
  onRequestAdd={onChipRequestAdd}
  onRequestDelete={onChipRequestDelete}
 />

And it works perfectly as I expected.

I think current behavior should be by default or at least optional

Object doesn't support property or method 'assign' (IE 11)

I will try to solve with https://babeljs.io/docs/plugins/transform-object-assign/

How to blur on every selection.

Thanks for the great work.

I want user to select predefined items, so I'm using it by setting openOnFocus.
But when one selection is complete, the focus is not changing. I have to click some other where to make the popup open again.

Can I programmingly do this in onRequestAdd callback.

Inconsistent argumentt for onRequestDelete callback

Originally reported by @Vishal0203 in #51.

       <ChipInput
              value={this.state.tags}
              onRequestAdd={(tag) => this.handleTagAdd(tag)}
              onRequestDelete={(deletedTag) => this.handleTagDelete(deletedTag)}
              dataSource={{name: 'Something', tag_guid: '123-567'}}
              dataSourceConfig={[{text: 'name', value: 'tag_guid'}]}
              hintText="Add tags to your question for easy visibility."
              openOnFocus={true}
              fullWidth
              chipRenderer={({ text, value, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => (
                <Chip
                  key={key}
                  className="chip"
                  labelStyle={this.styles.chipLabel}
                  onTouchTap={handleClick}
                  onRequestDelete={handleRequestDelete}
                >
                  {text}
                </Chip>
              )}
            />

and my handleRequestDelete is as follows

this.setState({
        tags: this.state.tags.filter((c) => c !== deletedTag)
      })

For backspace, deleteTag receives {name: 'Something', tag_guid: '123-567'} but on clicking
x, deleteTag receives 123-567 (and hence doesn't remove the tag unless I explicitly handle this condition)

Support of arrayOf(object)

Would it be possible to extend dataSource into accepting objects ( {label, value} for example) ?

Server side rendering issue

Hi all,

Faced an issue when using this great component in a "universal" rendering environment.
Version 0.11.2 would assign a unique ID to the input field using a random generator which obviously doesn't produce a consistent ID on both server and client:

const uniqueId = `${name}-${hintText}-${floatingLabelText}-${Math.floor(Math.random() * 0xFFFF)}`;
this.uniqueId = uniqueId.replace(/[^A-Za-z0-9-]/gi, '');

What was the idea of using such artificial string instead of having a standard "id" prop as other material-ui components does (and specifically AutoComplete component)?
Can we leave the random id as default but prefer on using id prop when specified like:

<ChipInput id="123123" ... />

Currently getting a following result:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ormorepracticeareas-14803" data-reactid=
 (server) ormorepracticeareas-3326" data-reactid="

Thanks!
Gleb

with autocomplete, custom filter, open on focus #question

Hi
Could you provide the source of the example 'with autocomplete, custom filter, open on focus' ?
Grazie

Redundant chips in popover

I just discovered this new component which fits perfectly my current needs, very nice job !

Can i mention your project in official MaterialUI issues ? (i have a pending PR about autocomplete with Chips but didnot know about this project)

I also have 2 suggestions about the chips in popover:

1. Whenfirst focusin the input (no value typed), the autocomplete popover should show with all available suggestions.
2. When selecting a suggestion chip from popover, this suggestion should disappear from suggestions list. And vice versa when deselecting a chip from the input, this chip should reappear in suggestions list.
   This behavior would make usage more friendly imho.

What's your thoughts ?

add transform-object-assign babel plugin

Thanks for this component. It looks good and is stable. Would you consider adding the transform-object-assign babel plugin? I have a requirement to support IE11. I'll probably update my webpack config to run material-ui-chip-input through babel, but just wanted to mention it to you in case you want to support IE11.

Auto complete support

The component should support auto completion while entering a new value.

Required prop `children` was not specified && unknown props `onRequestAdd`, `onRequestDelete` on <input> tag

I'm using material-ui-chip-input with React 15.3.1, Material-UI 0.15.4, the controlled example from the main page:

<ChipInput
  value={yourChips}
  onRequestAdd={(chip) => handleAddChip(chip)}
  onRequestDelete={(chip) => handleDeleteChip(chip)}
/>

gives me these warnings:

Warning: Failed prop type: Required prop `children` was not specified in `ChipInput`.
Warning: Unknown props `onRequestAdd`, `onRequestDelete` on <input> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

Probably the children prop shouldn't be marked as isRequired in PropTypes?

Also seems like onRequestAdd and onRequestDelete were passed by ...other down to the input element.

Width doesn't set through style property

Seems, width set to undefined in https://github.com/TeamWertarbyte/material-ui-chip-input/blob/master/src/ChipInput.js#L312 if fullWidth isn't set.
I recommend to initialize structure with if statement instead of explicit using undefined with ternary operator. This prevent rewriting attributes defined in style property.
Another approach is to use style attributes as backup values, but this do impossible to use another extend. The best safe operation is not to initialize the object attribute with any (include undefined) value, as I write above.

Update to material-ui 0.16 ?

Would be great to have an update to material-ui 0.16

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ChipInput`.

Warning message complaint by React when there are actually chips:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ChipInput`.

I believe this is due to not assigning the key attribute to Chip element starting from line 319.

Floating label does not work without hint text

The floating label in the following example is always floating. Hint text without floating label works, though.

<ChipInput
  defaultValue={['foo', 'bar']} 
  floatingLabelText="Demo"
/>

Two chips added when clicking autocomplete menu item

Looks like it's a regression in the 0.9.0 release, specifically this commit: a6e266d#diff-acb87ac4d1cdb3b6518879923e905559L164

Another call to handleAddChip() was added to the handleItemTouchTap(). Simply commenting out that line fixes the issue.

Uncaught Invariant Violation: addComponentAsRefTo

• fail-case.jsx:

import React from 'react'
import ReactDOM from 'react-dom'
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import ChipInput from 'material-ui-chip-input'
import injectTapEventPlugin from "react-tap-event-plugin";
injectTapEventPlugin();


const App = () => (
    <MuiThemeProvider>
        <ChipInput
            defaultValue={['foo', 'bar']}
        />
    </MuiThemeProvider>
);

ReactDOM.render(
    <App />,
    document.getElementById('app'),
);

• fail-case.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>: (</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&amp;subset=cyrillic" rel="stylesheet">
</head>
<body>
    <div id="app"></div>
    <script src="fail-case.jsx.js"></script>
    </body>
</html>

• browser console output:

bundle-final.jsx.js:32161 Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

How can I delete all chips?

Hi,

I would like to delete all the selected chips. How can I achieve this?

Can you please advise?

Thanks,
Thanuja

Chip editing

I don't know if this is useful, but at least Angular Material supports editing existing chips.

A way to customise style Chip item

Hi, how do I add a class to the chip item?
I see the documentation talks only about the styles to the root element.

Missing errorText prop

The errorText prop of material-ui's SelectField and TextField components doesn't seem to be implemented here.

Styling the chip input

Hello! I'm kind of new to inline styling in React. Specifically, for components that create nested divs without classes (and instead of inline styles) that I cannot access from the code I use to create that component.

For example, among other things, I'd like to increase the size of the input text as shown:

I only managed to do so as shown above, but inspecting element and manually typing it in the Developer Tools bar :

This div was nested several divs deep. Naturally, if it had some sort of class attached, I'd be able to go into my CSS/LESS file and style it, but inside my project JS file, I only have:

I saw in your Readme/documentation that the style property can take an object (ex style={ { backgroundColor: silver } }), but how do I target individually nested divs?

Because after I increase the font-size of the input text, I also need to style the chips' background colors, etc.

Thank you so much! I would appreciate being pointed in the right direction at least. Sorry if this is such a basic question, but I did Google 'react js inline styles', found some library called Radium, but am not sure if this is the best way to go about it.

filters enum

How about exposing an enum for available filters ?

filters property would have specifications:

function | enum('caseInsensitive', 'caseSensitive', 'fuzzy')
default: 'caseInsensitive'

I think the underlying already provides those 3 filters functions (and another one called levenshteinDistance i don't understand its behavior...).

Displaying value when using an object array for dataSource and dataSourceConfig

Hi,
I have an array of objects [{value:'IN',text:'India'},{value:'CA',text:'Canada'}...] as datasource and my dataSourceConfig is {text:'text', value: 'value'}.

The autocomplete dropdown has the value of text inside them (India,Canada etc) but after selection the chips displayed have the value of value key. (IN,CA etc). I am unable to display the text and wasnt able to figure out any option to do the same.
Inside value I tried setting it as selections.value but that doesn't display anything. Is that a bug?

How to integrate in redux-form

Hello,

i am trying to integrate your component with redux-form.
I wrote

<Field name="myField" component={ChipInput} hintText='...' />

but the field the edited values are not linked with the redux-form state.
Any suggestion ?

Set keyCode for rendering new Chip in prop

It would be helpful to be able to set the keycode for triggering the creation of a new prop to be on a key other than 13 (enter).

I have created an example of how this could be done in my own fork but it seems like something that could be useful for everyone.

Pressing key down causes exceptions

Copied from #9 (comment) by @chaitanya0bhagvan

You can reproduce this error in your story book. Select with autocomplete or objects as chips, uncontrolled or objects as chips, controlled click on the input and press down arrow twice. As the autocomplete options is displayed an error is thrown in the console.

Backspace to remove chip doesn't work with dataSource

For some reason, when I use ChipInput with dataSource and dataSourceConfig I can no longer use backspace to remove chips. Everything else works fine about a ChipInput. When I remove dataSource and dataSourceConfig, I can use backspace to remove chips.

Running `npm run storybook` throws errors around react-tap-event-plugin

ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /Users/marcacyr/github/material-ui-chip-input/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in /Users/marcacyr/github/material-ui-chip-input/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginUtils' in /Users/marcacyr/github/material-ui-chip-input/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPropagators' in /Users/marcacyr/github/material-ui-chip-input/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/SyntheticUIEvent' in /Users/marcacyr/github/material-ui-chip-input/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/ViewportMetrics' in /Users/marcacyr/github/material-ui-chip-input/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58

Getting the above errors when trying to run npm run storybook -- is there an undocumented step that is missing before being able to run storybook in the repo?

Customizing Chip Styles

Hi!

First of all, fantastic job with this component!

Is there any way to customize the style of the component (background, color, etc.) and what about adding an icon? (ref: http://www.material-ui.com/#/components/chip)

Keep popover open

In #8, the following improvement was suggested:

Also would it be possible, when "openOnFocus" is true, to keep the popover opened (it would close only on clickaway from the component's main container). Explanation: an input using chipS is not supposed, at least in general usages, to use only one Chip. So it would be more userfriendly to have the popover opened to multiselect several options at once.

default filter as caseInsensitive ?

default filter is set as caseSensistive in v0.4.1

Would not it be better as caseInsensitive by default ?
(would just have to add .toLowerCase() to the filter function)

AutoComplete fullWidth support

AutoComplete component doesn't get passed fullWidth prop.

Peer dependencies warnings on updates

Hello !

just a heads up, not really an "issue" but when im updating my dependencies i'm always getting these warnings with your packages:

npm WARN [email protected] requires a peer of react@~15.3.2 but none was installed.
npm WARN [email protected] requires a peer of react-tap-event-plugin@^1.0.0 but none was installed.
npm WARN [email protected] requires a peer of material-ui@~0.15.4 but none was installed.
npm WARN [email protected] requires a peer of react@~15.3.1 but none was installed.
npm WARN [email protected] requires a peer of react-tap-event-plugin@^1.0.0 but none was installed.

Any solution ?

P.S.: the versions of mentioned missing deps are actually way ahead, like [email protected] or [email protected]

onChange callback contains duplicated value when adding

When adding a chip, onChange callback includes 2 values of the added chip.

Duplicate text after submit

After typing text, example "hello", and hitting enter, the chip properly displays, but the 'hello' text I typed still lingers immediately after the chip. So it looks like this:

If this helps any, the 'ghost'/'phantom' text doesn't turn into a chip if I hit enter a second time. If I add one character to the phantom text (and thereby changing it), I can hit enter a second time and turn the new string into a chip.

I don't want this duplicate text at all. Here's the code I had written:

<ChipInput
          //defaultValue={[]}
          fullWidth
          floatingLabelText="start typing"
          onChange={(chips) => handleChange(chips)}
 />

It's wrapped inside the <MuiThemeProvider>, by the way. Apologies if I'm making a silly mistake. Help is GREATLY appreciated!!! Thank you!

Feature request ErrorStyle

Hi!

I think that just by adding:

    color: props.errorStyle ? props.errorStyle.color : errorColor

instead of:

    color: errorColor

in the error style, you could make it customizable.

Just a thought!

Always open auto-complete menu on click

Description of gif:

Click on the input, menu opens first time. Make a selection. Focus returned to input, chip added successfully, but the menu does not reopen.

The issue I'm running into is that when clicking in the autocomplete box, the menu opens correctly the first time. After clicking, or keying down to and selecting, an option the chip is added correctly, and focus is returned to the autocomplete input, but the menu does not reopen until the user hits a keyboard key (any key does the trick, but they must hit a key). Clicking again doesn't re-open the menu. No action other than a keydown/keyup on the keyboard does the trick.

I've been digging through the module code and I see the places where focus is returned to the AutoComplete component. Theoretically, this should do the trick but it isn't. I can't for the life of me figure out why the menu is not reopening. Have tried a number of things and have put debuggers all over the material-ui-chip-input lib code to try to find the cause, but have come up empty so far.

Any ideas?