Multi-select UI Issues

Topic: Multi-select UI Issues

goldfarbdev pro premium priority asked 6 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 premium answered 6 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 pro premium priority commented 6 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.

goldfarbdev pro premium priority commented 6 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

goldfarbdev pro premium priority answered 6 years ago

0 0 Best answer

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

Aliaksandr Andrasiuk staff answered 6 years ago