Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quirk: when re-selecting ingredients that were previously selected, they may not be placed at the end of the input list #239

Closed
jayaddison opened this issue Oct 17, 2023 · 1 comment · Fixed by #240
Labels
bug Something isn't working

Comments

@jayaddison
Copy link
Member

Describe the bug
Order of ingredient terms in queries can be used to infer some level of priority -- more important ingredients are likely to be listed first. See openculinary/api#117 for a recent changeset where we begin using query term order as an input during tiebreaker search result ranking.

This implies that users should be able to reorder ingredients easily. Currently there is a quirk in our autosuggest controls that means that previously-selected-but-removed items may be re-added at positions other than the end of the list.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the homepage.
  2. Enter three ingredients; for example, milk, butter and bread.
  3. Remove butter.
  4. Re-add butter.

Expected behavior
butter should appear at the end of the list; instead it is re-added in the middle.

Screenshots
We use select2 in multi-select mode and with an AJAX datasource to provide the ingredient autosuggest controls.

In this mode, select2 creates an HTML <option> element within the parent <select> element when a selection is made by the user.

However, it seems that select2 in this mode does not remove the <option> HTML element for items when they are unselected (the removal of butter).

This means that when they are re-added, the loop that builds up the list of items to render as tags discovers them in the order that they were first selected.

1. multiple items added

image

image

2. middle item removed

image

image
(notice that the entry for butter is still present as an HTML <option>)

3. removed item re-added

image

image
(notice that butter has unexpected appeared in the middle of the tag list - this seems to be due to the ordering of milk, butter, bread as the three <option> elements)

@jayaddison jayaddison added the bug Something isn't working label Oct 17, 2023
@jayaddison
Copy link
Member Author

I think that a short-term workaround for this could be to handle the select2:unselect event within the application's autosuggest component code, and possibly to raise the issue upstream. There are some select2 issue threads related to item ordering; we should be careful not to add noise until we have a good idea about the best place to comment -- and ideally a test case and/or code to contribute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
1 participant