Unit dropdown in Recipe View (edit view) allows selecting unavailable units with keyboard

[MarkusLeupold]

Unit dropdown in Recipe View (edit view) allows selecting unavailable units with keyboard

[MarkusLeupold]

Here are two screenshots of the bug.

I chose one "Glas" of "Crepes" pressing the "G" button on my keyboard:

But when I click on the dropdown, I can't chose "Glas":

[dboehmer]

@MarkusLeupold Did you receive two error 500 responses because of this issues? I was warned about two 500s in the server error log.

Some quick notes:

Could this be a bug in Chromium or Bootstrap?

Currently we use jQuery .toggle() to show/hide the select options. Is that a valid way of disabling option fields?

[MarkusLeupold]

@dboehmer When I noticed the issue, I didn't try to submit the false unit (But thinking about it now, I wonder that I did not do that. Normally I like to check out what happens in such cases).

But I remember that I actually did get one server-side error in the same Coocook session yesterday. Maybe, I already achieved to select an unavailable unit before and didn't notice the issue at that time.

I just checked out the code in dev tools:

• There are <option> elements for all units inside the <select> element. For all units that are not available for the chosen ingredient, the <option> element simply has display: none
• That means, that inside the DOM, all <option>s are still present
• Regarding the set of selectable options in a select, the browser doesn't care if some <option> element is not displayed, because this only affects the element in the dropped-down list itself. The display property isn't for completely making elements unavailable in DOM—just to make them not visible.

How to solve this:

• Only put those <option>s inside the <select>, that are actually available
• Since there is already some code setting the <option>'s display property, this should be easily done