Topic: Select dropdown won't show option with empty value if another item has selected attribute
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>
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 pro premium 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 pro premium priority commented 2 years ago
I agree with @trae. An empty option is rather frequent and should not be dismissed.
trae pro premium 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 pro premium 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 pro premium 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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