Expected behavior See any of the examples here: https://mdbootstrap.com/docs/standard/forms/select/#docsTabsOverview

In the Chrome element inspector right click the selectbox and go to inspect element, then scroll down a little to the hidden element they are using to drive it. uncheck it’s display: none !important; CSS property so you can see both the MDB selectbox and the “real” html selectbox at the same time. Now hit the clear button in the MDB selectbox and watch what happens The MDB box shows an empty selectbox and the “real” html select that the javascript reads all the values from is reset to the top index… so if you don’t provide an empty value as the first index of your HTML selectbox it’s incapable of correctly reporting a cleared value in the API - a cleared selectbox returns the same result as if the first real option was selected. (edited)

I don’t think this should be intended behavior because having an empty item in the options list is super ugly, and they don’t have it in their example.. seems like an oversight or a bug

Actual behavior If the first entry of the hidden select box is not blank, then it's not possible to clear the selection from the Javascript function. It will return the item (non NULL).

Resources (screenshots, code snippets etc.)

See : https://vimeo.com/554473546