teamwertarbyte / material-ui-chip-input Goto Github PK
View Code? Open in Web Editor NEWA chip input field using Material-UI.
Home Page: https://mui.wertarbyte.com/#material-ui-chip-input
License: MIT License
A chip input field using Material-UI.
Home Page: https://mui.wertarbyte.com/#material-ui-chip-input
License: MIT License
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)
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.
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.
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.
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 .
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)
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!
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
The component should support auto completion while entering a new value.
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]
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.
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:
What's your thoughts ?
Currently it's impossible to hide TextFieldUnderline
element
I don't know if this is useful, but at least Angular Material supports editing existing chips.
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.
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.
Would be great to have an update to material-ui 0.16
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.
When adding a chip, onChange callback includes 2 values of the added chip.
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
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.
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?
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?
I will try to solve with https://babeljs.io/docs/plugins/transform-object-assign/
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)
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..."
/>
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.
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.
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.
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...).
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.
The floating label in the following example is always floating. Hint text without floating label works, though.
<ChipInput
defaultValue={['foo', 'bar']}
floatingLabelText="Demo"
/>
Hi, how do I add a class to the chip item?
I see the documentation talks only about the styles to the root element.
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?
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'),
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>: (</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="fail-case.jsx.js"></script>
</body>
</html>
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).
Hi,
I would like to delete all the selected chips. How can I achieve this?
Can you please advise?
Thanks,
Thanuja
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?
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.
AutoComplete
component doesn't get passed fullWidth
prop.
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
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.
The errorText
prop of material-ui's SelectField and TextField components doesn't seem to be implemented here.
Hi
Could you provide the source of the example 'with autocomplete, custom filter, open on focus' ?
Grazie
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
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!
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!
Would it be possible to extend dataSource into accepting objects ( {label, value} for example) ?
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 ?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.