Render native select out of screen or with clip: rect(0 0 0 0), height: 0

I realized a probelm with Select2 when using with some web framworks having client-side validation. Some frameworks use this selector to figure out elements to be validated while form submission: input:visible:enabled:not(:button)[name]. Saidly, but the native select element in Select2 has display: none and can not be validated. Can you render the native select out of screen please or apply this jQuery UI style class (normally applied to the surrounded div)?

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 0px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 0px;
}

I quess, you should also set aria-hidden attr. to make it invisible for screen readers.

[elanhami]

This caused some trouble for me on Chrome when working with a large dataset (in my case more than 7000 elements). Since the native select is still considered part of the render tree, selecting an option in select2 has a significant delay because displaying/removing the dropdown causes a page reflow. The browser applies the reflow to all the options in the DOM, whereas with display:none this is not the case.

Adding this here to save others time I spent finding the cause…

[ova2]

Thank you!