{"record":{"id":"165edbc6e3a66a8e","repo":"theonedev/onedev","slug":"sorting-of-elements-is-not-supported-when-attached","errorCode":null,"errorMessage":"Sorting of elements is not supported when attached to <select>. Attach to <input type='hidden'/> instead.","messagePattern":"Sorting of elements is not supported when attached to <select>\\. Attach to <input type='hidden'/> instead\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"server-core/src/main/java/io/onedev/server/web/component/select2/res/select2.js","lineNumber":2689,"sourceCode":"               }\n\n               this.opts.initSelection(this.opts.element, function(data){\n                   var ids=$(data).map(self.id);\n                   self.setVal(ids);\n                   self.updateSelection(data);\n                   self.clearSearch();\n                   if (triggerChange) {\n                       self.triggerChange();\n                   }\n               });\n           }\n           this.clearSearch();\n       },\n\n       // multi\n       onSortStart: function() {\n           if (this.select) {\n               throw new Error(\"Sorting of elements is not supported when attached to <select>. Attach to <input type='hidden'/> instead.\");\n           }\n\n           // collapse search field into 0 width so its container can be collapsed as well\n           this.search.width(0);\n           // hide the container\n           this.searchContainer.hide();\n       },\n\n       // multi\n       onSortEnd:function() {\n\n           var val=[], self=this;\n\n           // show search and move it to the end of the list\n           this.searchContainer.show();\n           // make sure the search container is the last item in the list\n           this.searchContainer.appendTo(this.searchContainer.parent());\n           // since we collapsed the width in dragStarted, we resize it here","sourceCodeStart":2671,"sourceCodeEnd":2707,"githubUrl":"https://github.com/theonedev/onedev/blob/d44925c47c37992c828ea673a5f9620539bc3ff2/server-core/src/main/java/io/onedev/server/web/component/select2/res/select2.js#L2671-L2707","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Change the underlying element to <input type='hidden'/> and initialize select2 on it instead of <select>.","Disable sorting/drag features so onSortStart is never triggered for the select-backed widget.","In Wicket-style frameworks, use the select2 component variant backed by a hidden input when tag ordering matters.","Handle 'select2-sortstart'/'sortstart' and preventDefault when the widget is select-backed."],"exampleFix":"// before\n<select id=\"sel\" multiple>...</select>\n$('#sel').select2({multiple: true});\n// after\n<input type=\"hidden\" id=\"sel\"/>\n$('#sel').select2({multiple: true, query: dataFn});","handlingStrategy":"type-guard","validationCode":"if ($el.is('select')) { console.warn('sorting not supported on <select>-based select2'); }","typeGuard":"function supportsSorting(el) { return !el.is('select'); }","tryCatchPattern":"try { enableDragSort(el); } catch (e) { if (/Sorting of elements is not supported/.test(e.message)) { disableDragSort(); } else { throw e; } }","preventionTips":["Use input[type=hidden] as the select2 base element when ordering matters","Do not attach sortable plugins to select-backed multi-select2 widgets","Disable drag features when rendering selects"],"tags":["javascript","select2","frontend","drag-and-drop"],"backgroundTag":"unsupported-operation","analyzedSha":"d44925c47c37992c828ea673a5f9620539bc3ff2","analyzedAt":"2026-09-06T07:18:27.995Z","contentChangedAt":"2026-09-06T07:18:27.995Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}