Search option for multiple selection field #1483
Conversation
|
Please provide a screen recording. |
please refer the google drive for the screen records. I uploaded both old and new method there. |
|
Can you select more devices and see what happens to the field if it doesn't fit? |
it expands the field. similar way the current connection input work. |
|
This is obviously not what we want in this case. |
It really helpful if we have the search feature within this field. Do you have any suggestion to implement this in a better way? Its a really helpful feature. If you have any better UI suggestion, I'm happy to implement. |
|
I think it should look similar to what it looks like now without stretching the field. I don't know how to implement it and that's exactly the reason we're not using autocomplete there. We already tried, but it doesn't work well. |
|
will try to implement without loosing current design |
|
So, the main problem is there was nothing that would fit good implemented in mui. Did not check recently, but I was looking for something like select2: |
|
I have another doubt regarding this. lets assume we implemented this. how we unselect selected items? I was thinking that if we could sort the list and move selected items to the top, then it will be easier to deselect. It just an idea. let's see how we could implement this. |
|
You can un-select using the same search. I don't want to overcomplicate it. |
|
how user know selected devices when he has 1000 devices and more than 10 selected? according to the design as we wrap selected list, It will be harder. is that okay? |
|
They selected those devices. They can de-select exactly the same way. |
|
That’s a good point. I will try to implement it in that way |
|
@tananaev I made some changes and I hope this design looks fine. 
|
|
Looks better. Is it ready for review? |
yes please |
|
@tananaev please allow me to modify the code and request review again. I will combine all and implement a single search. that would be better. |
| }} | ||
| renderInput={(params) => <TextField {...params} label={label} placeholder={getPlaceholder()}/>} | ||
| disableCloseOnSelect={multiple} | ||
| slotProps={{ |
There was a problem hiding this comment.
Can we override renderValue instead of doing this?
There was a problem hiding this comment.
Actually can we render selected items using renderValue? Instead of using placeholder for that?
There was a problem hiding this comment.
when we use renderValue, it replace the render input behaviour and try to render two elements within the AutoComplete element (value div and input element) which cause to ui issues because in that case, it contains 2 flex divs.
There was a problem hiding this comment.
Why does it cause issues exactly?
There was a problem hiding this comment.
in normal behaviour, the value render as the input element but when we use renderValue, it create another <div> alongside with input element. let me share a screenshot with a better comparison
There was a problem hiding this comment.
Its the normal behaviour and you see the value is rendered within the input element (as value parameter of the input)
And when we use renderValue it render the value separately instead rendering it as value of the input element.
There was a problem hiding this comment.
But that's kind of what we want. We just need to make sure it doesn't overflow.
There was a problem hiding this comment.
We will have to implement the element manually. There are some other issues like where cursor will be when we have separate renderValue and input. I will try when I get a free time
3 participants
When managing a large number of devices, selecting the correct one from a long dropdown list is difficult and time-consuming.
Improvements
Benefits