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

Add SelectionOrder DataAdapter decorator and related options #6014

Closed

Conversation

devmonkey22
Copy link
Contributor

Add SelectionOrder DataAdapter decorator and related options as a proposal to resolve #3106 with some limitations for manual selection changes (as noted).

  • This class has to keep both display and selection ordering for all options in order to manage selection order, while maintaining the default results/query ordering (when sorter is not used, etc).
  • Notable but unfortunate limitation: Setting the control value using jQuery.val([...]) with multiple items or manually toggling option selected (without a change event) still cannot preserve the value ordering.
    • The partial workaround for this is to manually set your selected options with the data-selection-order attribute before setting val() if possible.
    • It may also be possible to enhance the decorator to watch for manual changes via MutationObserver. TBD.

New options:

  • keepSelectionOrder
  • trackManualSelectionOrder

Update docs.
Add tests.

This pull request includes a

  • Bug fix
  • New feature
  • Translation

…roposal to resolve select2#3106 with some limitations for manual selection changes (as noted).

- This class has to keep both display and selection ordering for all options in order to manage selection order, while maintaining the default results/query ordering (when `sorter` is not used, etc).
- Notable but unfortunate limitation: Setting the control value using `jQuery.val([...])` with multiple items or manually toggling option `selected` (without a `change` event) still cannot preserve the value ordering.
  - The partial workaround for this is to manually set your selected options with the `data-selection-order` attribute before setting val() if possible.
  - It may also be possible to enhance the decorator to watch for manual changes via MutationObserver. TBD.

New options:
- `keepSelectionOrder`
- `trackManualSelectionOrder`

Update docs.
Add tests.
@devmonkey22
Copy link
Contributor Author

devmonkey22 commented Apr 2, 2021

So I played with MutationObserver a little more. Unfortunately it doesn't fire for property changes (option.selected etc), so there is still no consistent way to watch for jQuery.val sets (without modifying jQuery.valHooks which I think is pretty discouraged. So this is still a limitation of the solution without a different workaround like:

  • Setting option selections individually with a change event each like
    $select.find('option[value=3]').prop('selected', true).trigger('change');
  • Manually setting the data-selection-order attribute of each option before setting jQuery.val([...])

- Refactor initial DOM option and change event processing.
- Refactor option item/data to hold displayOrder/selectionOrder values, and inspect DOM attributes as way to manually set/update as needed (ie: when adding options, setting values, etc).
- Fix issues with using `ArrayData` and subclasses like `AjaxData`.

SelectAdapter fix:
- Update `SelectAdapter.prototype._normalizeItem` to properly set `id` from `text` for `<option>Text</option>` (no `value`) scenarios. This allows finding these options by value/id properly.

Update CHANGELOG.md with `SelectionOrder` decorator changes.
@devmonkey22
Copy link
Contributor Author

I figured I'd throw this out here. This is a 6 year old problem with an imperfect solution, but I don't think there ever will be (without MutationObserver changes perhaps) given the constraints of using a real <select> and how HTML/JS behaves natively.

@stale
Copy link

stale bot commented Jun 11, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the status: stale label Jun 11, 2021
@stale stale bot closed this Jun 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

In multi-select, selections do not appear in the order in which they were selected
1 participant