Select dropdown won't show option with empty value if anothe

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

Add comment

trae priority answered 2 years ago

0 0 Best answer

Is "priority" useless then?

Add comment

Kamila Pieńkowska staff answered 2 years ago

0 2 Best answer

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.

Add comment

Write

Create snippet

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

trae

2Support score
2Questions 1Answers 1Snippets