Coder Social home page Coder Social logo

Comments (7)

leMaik avatar leMaik commented on May 30, 2024

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.

leMaik avatar leMaik commented on May 30, 2024

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.

Sharlaan avatar Sharlaan commented on May 30, 2024

Just tried, very nice !

  1. Would it be possible to make the filter function as default value, so just have to include "openOnFocus" to get the functionality ?
  2. 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.

leMaik avatar leMaik commented on May 30, 2024
  1. 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.
  2. 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.

Sharlaan avatar Sharlaan commented on May 30, 2024
  1. yes agreed, but the original AutoComplete is designed for a single value selection. Is a ChipInput also supposed to be same design ? Probably not ...
  2. 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.

leMaik avatar leMaik commented on May 30, 2024
  1. Good point, I'll change the default value.
  2. 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.

leMaik avatar leMaik commented on May 30, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.