Comments (7)
I'm happy to see that this component is useful for some people. :) Of course, you can mention this project. I don't know if they'd merge this component into their core library, but if they want, I'd be all for it.
Regarding your suggestions:
- Show popover on focus with no value typed: I'll add an option to display the popover even if no text is entered (if that is possible using
<AutoComplete />
- Remove selected chips from suggestion list: That would be a good enhancement for usability, I'll add that in the next version 👍
from material-ui-chip-input.
Your first suggestion was already possible using the openOnFocus
prop. I added it to the props table in the readme so that it is easier to find.
If openOnFocus
is set to true
, the menu will open on focus, if there are auto-complete suggestions. That means that you need a filter that has results even without input, which the default filter does not do (it returns no results if there is no input).
I added a story that does what you want, using this code:
<ChipInput
fullWidth
openOnFocus
dataSource={['alpha', 'beta']}
hintText="Try typing a..."
filter={(search, key) => search === '' || key.indexOf(search) >= 0}
/>
from material-ui-chip-input.
Just tried, very nice !
- Would it be possible to make the filter function as default value, so just have to include "openOnFocus" to get the functionality ?
- 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.
from material-ui-chip-input.
- Thought about that, but I wasn't sure if that should be the default filter. The way it is now, it behaves liek
AutoComplete
, which makes it consistent. - I could re-open the menu, but it is hard-coded to always close when pressing the enter key in the dropdown menu. 😕 I really don't want to write my own
AutoComplete
.
from material-ui-chip-input.
- yes agreed, but the original AutoComplete is designed for a single value selection. Is a ChipInput also supposed to be same design ? Probably not ...
- Indeed i also noticed this hard coded way for the close(), but maybe a look at my PR#L247 would help you find an easy solution ? (actually i didnot have to change "that" much)
from material-ui-chip-input.
- Good point, I'll change the default value.
- I'll look into that in the next days. I think I just need to override the event handler somehow (without copy/pasting
AutoComplete
)
from material-ui-chip-input.
@Sharlaan Didn't get number 2 to work.
If you want to do this, a pull request would be highly appreciated. :)
PS: Let's continue this discussion over at #11.
from material-ui-chip-input.
Related Issues (20)
- On Android Mobile: newChipKeys not working HOT 1
- dataSource is not working HOT 1
- Update storybook examples
- How to add date/datetime values as chips?
- Can I add icon to input field like in TextField by using Input Adornments?
- Label positioning on "outlined" variant is incorrect.
- Dependency version mismatch error: Unable to install this module HOT 12
- Dependency error with material-ui/core v5 HOT 3
- Make chips editable in the same place HOT 1
- "future" compatibility issue HOT 1
- Module not found HOT 1
- Make ChipInput a required field in a form HOT 1
- Chip note adding using space bar HOT 1
- MUI v5 HOT 1
- Please add React 17 support HOT 7
- Is there a way to change OnBlur so that focusing and then clicking on a chip doesn't trigger it?
- Submit button not working after update the Android system WebView in android device.
- Performance issue with pasting 100+ items in chip input. Cannot add more chips and DOM freezes
- Should ChipInput component be wrapped by Form tag ?
- unable to install in react 18v HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui-chip-input.