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

trae priority asked 1 year 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>
    <label class="form-label select-label">Is Active</label>

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

the issue

trae priority answered 1 year ago

Is "priority" useless then?

Kamila Pieńkowska staff answered 1 year 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 1 year 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 1 year ago

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

trae priority commented 1 year 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 1 year 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 1 year 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.


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



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