openculinary / frontend

The RecipeRadar Frontend is a recipe search and meal planning application
GNU Affero General Public License v3.0
13 stars 2 forks source link

autosuggest: when an item is unselected, remove the corresponding HTML 'option' element #240

Closed jayaddison closed 1 year ago

jayaddison commented 1 year ago

The select2 component that we use to manage the autosuggest controls appends an HTML 'option' element each time an item is selected by the user, if one does not already exist.

Also, the select2 component displays user-facing selections by looping over the HTML option elements that it finds in the DOM.

So, to ensure that newly-added selections always appear at the end of the user-facing selection list, we need to maintain the same order for the option elements in the DOM. In particular, when a user unselects/clears an item, we need to remove the corresponding HTML option element.

Describe the reason for these changes and the problem that they solve

Allows the user to more easily re-order the ingredients within the autosuggest search controls.

Briefly summarize the changes

  1. When an item is unselected from the list, remove the underlying HTML <option> element that the select2 library uses to store previously-selected items.

How have the changes been tested?

  1. Local development testing.

List any issues that this change relates to Fixes #239.