Multiselect element without disabled option has default sele


Topic: Multiselect element without disabled option has default selection, which is wrong

Juric pro premium asked 7 months ago

Dear support,I have just mentioned, that if I don't use a default disabled option in multiselect element, the first option will be selected as default, which is wrong, in my opinion. So if we have

<select id="idSelect" class="mdb-select md-form colorful-select dropdown-primary" multiple searchable="Search here.." multipletype="OR">
      <!-- <option value="" disabled selected>Choose your country</option> -->
      <option value="USA">USA</option>
      <option value="Germany">Germany</option>
      <option value="France">France</option>
      <option value="Poland">Poland</option>
      <option value="Japan">Japan</option>
    </select>
    <label>Label example</label>
    <button class="btn-save btn btn-primary btn-sm">Save</button>

the first option (USA) is selected and shown, which is not wanted. Why?Thanks and regards


Sebastian Kaczmarek staff pro premium answered 7 months ago

Actually, it is not selected, it's just displayed as it was - but it's not. The reason is simple: something has to be displayed on the <select> as the first option. When you delete the first option (which is typically used as placeholder) then the next one is being displayed as the first. But it doesn't mean that it's actually selected, the value of the Multiselect is empty. Look at my snippet for the demo: https://mdbootstrap.com/snippets/jquery/s-kaczmarek/393257


Juric pro premium answered 7 months ago

Thanks for replying.

I understand now, that whoen value is not selected. But anyway, in my opinion, it is confusing for the user. How shozld user know, if it was selected or not.

So, I think, if it is wanted by your design, I think it is not the optimal solution


Sebastian Kaczmarek staff pro premium commented 7 months ago

Do you have any suggestions? ;)


Juric pro premium answered 7 months ago

Hi, sure, I would suggest, that if no selection is done yet, the user sees nothing at all.

Cause if I want as a webdeveloper, that user sees something I can always add a default selected option. In your example it is

<option value="" disabled selected>Choose your country</option>

Regards


Sebastian Kaczmarek staff pro premium commented 7 months ago

I see, thanks for your opinion. At the moment you can just put a blank <option> with no text inside it as the first option so this will emulate the behavior you described.


Juric pro premium answered 7 months ago

Ok, yes, sure. Best regards


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.6.1
  • Device: Desktop
  • Browser: IE 11, Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No