Topic: Select dropdown won't show option with empty value if another item has selected attribute

trae priority asked 2 years ago


Expected behavior "All" should be visible when I select "All" in the dropdown.

Actual behavior The option with the selected attribute shows instead of the option with an empty value when it is selected.

Resources (screenshots, code snippets etc.)

<form action="/my/path" method="get" class="validate-form" accept-charset="utf-8">
    <select name="is_active" class="select">
        <option value="">All</option>
        <option value="0">No</option>
        <option value="1" selected="selected">Yes</option>
    </select>
    <label class="form-label select-label">Is Active</label>

    <button type="submit" class="btn btn-primary ms-auto">Filter</button>              
</form>

the issue


trae priority answered 2 years ago


Is "priority" useless then?


Kamila Pieńkowska staff answered 2 years ago


It is correct behavior. You need to put some value to the option if you want it to be saved. Leaving empty value is meant specifically to display value that cannot be selected.


trae priority commented 2 years ago

I disagree. An option with an empty value should still be selectable, just like it is without MDB. Every option in a select menu should be selectable, and then it is up to the validation rules to be enforced from there. Automatically disabling the option is not correct.


gianlucagiacometti priority commented 2 years ago

I agree with @trae. An empty option is rather frequent and should not be dismissed.


trae priority commented 2 years ago

And technically, the value is actually selectable but its "All" option label is not visible in the UI, and if you submit the form it is still submitted with the empty value.

So internally the empty value is actually selectable, so not showing the selected "All" in the UI is the real issue here.


Alistair Wilson priority commented 2 years ago

Also struggling with this especially when required, really needs to be fixed! Adding this css fixed the issue for me.

.select-fake-value { visibility: hidden; }


trae priority commented 2 years ago

@kpienkowska Please re-review this.

@Alistair, thank you, but with that suggestion then the "All" is never visible in the input.



Please insert min. 20 characters.

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 Standard
  • MDB Version: MDB5 5.0.0
  • Device: Desktop
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No