-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Capability of using Downshift for Select component #15078
Comments
Here is what i did right now to make a
|
A few things. I would highly recommend you bind https://github.com/downshift-js/downshift/blob/master/src/stateChangeTypes.js
On the other note: I would recommend you warp your drop down in a normal div tag. |
Actually I would like to ask the ability to make the Select component Menu controllable. Here is the codes I finally work out to make it works.
And what I would like to get rid of is the Currently the Actually if I use third party library like |
@raymondsze Have you seen mui-downshift package yet? This is what I use. |
@cvanem |
Is this a proposal for different implementation of |
@eps1lon However, You may say inputAdornment could do the Dropdown Icon, but I found that they are totally different and not easy to do the same. So, I think it should be a proposal for different implementation of |
That sounds like bad UX. Dialogs are usually very disruptive elements and should be used as rarely as possible. Do you have some mock implementation that I can play with? Right now I don't understand what issue you're trying to solve. |
Dialog is bad UX for desktop, but reasonable for Mobile device (What I mean here is 'full-screen' Dialog). |
So this is more of a usage question? Sounds like this is more appropriate for StackOverflow or Spectrum unless you have a conrete proposal for an integration demo. Otherwise I don't think this should be part of the Select component which has a pretty clear definition on the web. Making it work like a fullscreen dialog on mobile is not necessarily part of a select widget. |
Nope, from my point of view. The current implementation of Select does not allow me to integrate with Downshift. Full screen dialog is just an example of usecase. Basically, here is what I need.
I will provide an example when I have time to do it. |
I believe we should close for #13863. |
@oliviertassinari I agree |
Apart from
AutoComplete
,downshift
could be used to implement a dropdown component withgetToggleProps
.I would like to use
downshift
instead of the original implementation of Select (TextField) component.The main purpose I would like to have this feature is to implement
What I need is to keep the ui looks & feel of what Select have.
I have tried to set the
open
andonOpen
ofSelectProps
to make the open controlled by myself. ButSelect
force me to put at least one child to the component.Also, if I click on the
TextField
, theTextField
is highlighted as usual (focused state) but never get blur if I mark theopen
prop asfalse
.Another attempt is I try to implement a component looks similar to
Select
but withoutMenu
and any dropdown related event callback. But I found it is too hard to do except clone the codes from the@material-ui/core
package.Any advices / workaround on doing this?
Or should we have a pure
Select
like component without any dropdown behaviour or pass a props toSelect
indicate that we would implement the dropdown ourself?And just a question. What is the design principle of Select and RadioGroup, since these component make use of React.cloneElement heavily and somehow assume the children must be MenuItem or FormControlLabel/Radio. Select is more complicated as it grab the children of MenuItem as default "renderValue", the "renderValue" behaviour could be different if multiple is specified as true due to
.join(',')
. And... we have RadioGroup but we don't have CheckboxGroup. If array value is rare, why we have Select that with "multiple" prop.....Thanks.
Expected Behavior 🤔
Current Behavior 😯
Examples 🌈
Context 🔦
The text was updated successfully, but these errors were encountered: