Select2: disable selection of Select2 by pressing
How can we prevent the disabled Select2 dropdown from focusing on the click. It is not recommended to focus on pressing the TAB key.
I've already tried adding tabindex = '- 1' to various divs in the Select2 hierarchy. Nothing helped.
For example, open this link to go to the documentation page and try clicking on the disabled example of Select2, it will get focused, which shouldn't happen in my case.
EDIT:
Tried @Guruprasad's answer on the above link without success on the Chrome console with the following code:
jQuery('.select2-container--disabled .select2-selection').on('click', function () {
console.log('clicked');
jQuery('.select2-selection').blur;
});
'clicked' prints every time I click on the disabled selection, but does not remove the element's focus.
source to share
Just write JS
$('.select2-selection').on('click',function(){
$(this).blur();
});
UPDATE
blur
it should be blur()
jQuery('.select2-container--disabled').on('click', function () {
console.log('clicked');
jQuery('.select2-selection').blur();
});
UPDATE 2:
It is very difficult for me to tell if you will be able to stop focusing, but for perspective to ui
show the user that it is disabled, you can add below css
:
.select2-container--default .select2-selection--single .select2-selection__rendered
{
cursor:not-allowed;
}
source to share