theonedev/onedev · error · Error

Sorting of elements is not supported when attached to <selec

Error message

Sorting of elements is not supported when attached to <select>. Attach to <input type='hidden'/> instead.

What it means

Select2's onSortStart fires when drag-and-drop sorting begins on a multi-select. If the widget is attached to a native <select> element it throws, because DOM sorting would corrupt the underlying select's option structure. Sorting is only supported on elements like input[type=hidden] where select2 fully owns the rendered markup.

Source

Thrown at server-core/src/main/java/io/onedev/server/web/component/select2/res/select2.js:2689

               }

               this.opts.initSelection(this.opts.element, function(data){
                   var ids=$(data).map(self.id);
                   self.setVal(ids);
                   self.updateSelection(data);
                   self.clearSearch();
                   if (triggerChange) {
                       self.triggerChange();
                   }
               });
           }
           this.clearSearch();
       },

       // multi
       onSortStart: function() {
           if (this.select) {
               throw new Error("Sorting of elements is not supported when attached to <select>. Attach to <input type='hidden'/> instead.");
           }

           // collapse search field into 0 width so its container can be collapsed as well
           this.search.width(0);
           // hide the container
           this.searchContainer.hide();
       },

       // multi
       onSortEnd:function() {

           var val=[], self=this;

           // show search and move it to the end of the list
           this.searchContainer.show();
           // make sure the search container is the last item in the list
           this.searchContainer.appendTo(this.searchContainer.parent());
           // since we collapsed the width in dragStarted, we resize it here

View on GitHub (pinned to d44925c47c)

Solutions

1. Change the underlying element to <input type='hidden'/> and initialize select2 on it instead of <select>.
2. Disable sorting/drag features so onSortStart is never triggered for the select-backed widget.
3. In Wicket-style frameworks, use the select2 component variant backed by a hidden input when tag ordering matters.
4. Handle 'select2-sortstart'/'sortstart' and preventDefault when the widget is select-backed.

Example fix

// before
<select id="sel" multiple>...</select>
$('#sel').select2({multiple: true});
// after
<input type="hidden" id="sel"/>
$('#sel').select2({multiple: true, query: dataFn});

if ($el.is('select')) { console.warn('sorting not supported on <select>-based select2'); }

function supportsSorting(el) { return !el.is('select'); }

try { enableDragSort(el); } catch (e) { if (/Sorting of elements is not supported/.test(e.message)) { disableDragSort(); } else { throw e; } }

When it happens

Trigger: Dragging to reorder selections on a select2 multi-select widget that was initialized on a <select> element; a sortable/drag library triggering sortstart on a select-based select2.

Common situations: Adding jQuery UI sortable or similar to a select-based multi-select2; user attempts to drag-reorder tags on a select-backed multi-select; framework component rendering multi-select as <select> while enabling ordering.

Understand the failure class

Background: UnsupportedOperationException and "is not supported" errors: when a library deliberately refuses a call — this error's family across 30 libraries.

Related errors

• val() cannot be called if initSelection() is not defined
• Failed to load notebook: {response.status}

AI-assisted analysis of theonedev/onedev@d44925c47c (2026-09-06). Data as JSON: /api/errors/165edbc6e3a66a8e. Report an issue: GitHub.