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

[MarkusLeupold]

This is a bug of coocook.org

When I control the recipe edit view with my keyboard, I can choose units from the "Unit" dropdown that are not visible inside the dropped down list after clicking it.

How to recreate this bug / Exact circumstances under which the bug occured

• User Agent: Chromium browser with Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36
• Find a unit in a project for which an ingredient exists that does not allow this unit. Let's call the unit u and the ingredient i.
• Open or create a recipe
• Choose i in the ingredients dropdown in the "Add Ingredients" section
• Press the tab key until the unit dropdown is in focus
• Press the first character of the name of u on your keyboard (possibly you have to do this multiple times)
• u will occur in the "Unit" field (although it should not be available for the chosen ingredient)
• Click on the "Unit" dropdown. You will not see u in the dropped-down list although you were able to choose it using your keyboard before

Subjective impression of this bug

It seems like you can choose any unit of a project for any ingredient inside a recipe of this project using keyboard controls—independent from which units are actually set up to be available for this unit.

[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