Multi-select UI Issues

Topic: Multi-select UI Issues

goldfarbdev priority asked 5 years ago

Actual Version is 4.15.0 *Expected behavior* Label and select dropdown should be separate. When selecting items, the default dropdown/input should list the selected items separated by commas. Actual behavior Label and select dropdown are meshed together. Original value is stated. Resources (screenshots, code snippets etc.) enter image description here

enter image description here

<MDBSelect
      multiple
      label="Songlist"
      search
      options={songList}
      selected="Choose a Song"/>

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Hi there,

Can you try the select components from this Demo page: https://react.mdbootstrap.com/forms/pro/select (this is built on our latest mdbreact version).

I think that something from your project can collide with mdbreact's Select styles.

Best,

Jakub

goldfarbdev priority commented 5 years ago

Thanks Jakub. I was using both label and selected props and that was contradicting. I think that is still a bug. I don't believe you mention not to use both props. When you use both label and selected props, the original selected text remains in the input field like in the screen shots above.

FYI, the UI for the outline version is not good. When you click on the element it acts as an input and I was inclined to type in it as if it were a search input. Then if you clicked on an option, the input would not update with the selected option(s). Instead the text I originally typed in would remain. It's like that on your demo as well.

Please insert min. 15 characters.

goldfarbdev priority commented 5 years ago

Another comment I have is that the user should not be allowed to type in the "input field" for the multi-select. I'm not referring to the search input, the input field which contains the selected value(s). On a mobile device, when you click on the select dropdown, the focus is on the input you clicked on. Therefore, the keyboard appears giving the user the impression that if they type, the search field will populate. Instead, the initial input populates and breaks the UI.

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

HI,

SO much thanks for your response. It was very helpful.

We will try to fix all the issues as soon as possible.

Best regards.

Add comment

goldfarbdev priority answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Per my last comment,

I added an onClick method which adds a blur to the event.target. The input you are clicking on has a class of 'select-dropdown'. You want to be sure that if you have a search input in the multi-select that you don't add a blur on that. So I check if the target has a class of select-dropdown before applying a blur event.

blurInput (e) {
    if(e.target.className === 'select-dropdown') {
        e.target.blur();
    }
}
//component markup 
<MDBSelect
    search
    multiple
    options={this.state.options}
    label="Label text"
    selected="Selected Text"
    onClick={this.blurInput}
/>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB React
MDB Version: 4.13.0
Device: MAC
Browser: Chrome
OS: iOS
Provided sample code: No
Provided link: No

goldfarbdev

35Support score
4Questions 2Answers 1Snippets