autosuggest: when an item is unselected, remove the corresponding HTM…

…L 'option' element (#240)

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.

src/app/autosuggest.ts

@@ -23,6 +23,11 @@ function bindEquipmentInput(element: string, label: string, placeholder: string)
 
   // TODO: Revisit once https://github.com/select2/select2/issues/3744 is handled
   $(element).next('.select2').find('input[type=search]').attr('aria-label', label);
+
+  // TODO: https://github.com/openculinary/frontend/issues/239 - report upstream?
+  $(element).on('select2:unselect', function(evt) {
+    evt.params.data.element.remove();
+  });
 }
 
 function bindIngredientInput(element: string, label: string, placeholder: string) : void {
@@ -45,6 +50,11 @@ function bindIngredientInput(element: string, label: string, placeholder: string
 
   // TODO: Revisit once https://github.com/select2/select2/issues/3744 is handled
   $(element).next('.select2').find('input[type=search]').attr('aria-label', label);
+
+  // TODO: https://github.com/openculinary/frontend/issues/239 - report upstream?
+  $(element).on('select2:unselect', function(evt) {
+    evt.params.data.element.remove();
+  });
 }
 
 $(function() {