CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrap
Erdogan
Erdogan

Reputation: 990

jquery bootstrap selectpicker blur after using the toggle

I have almost 15 text fields in my form. Every select call binding next select picker. I want to blur (unfocus) on the select picker input text field after using the toggle. 

$('#drpSubModels').selectpicker("refresh");
$('#drpSubModels').selectpicker('toggle');

enter image description here

I'm trying for this as like that;

  setTimeout(function () {
        $(".form-control").blur()
    }, 1000);

But mostly, it didn't work. If I set the setTimeout value under 1000, it never works.

(Meanwhile, setTimeout is not a good solution because I'll use this form in a mobile app as Hybrid. When I use the toggle, every time calls the keyboard and If the blur is work, keyboard immediately showing and disappearing on the screen, If setTimeout not working, the keyboard appearing permanently)

onload, ontoggle etc. no any chance..

$('.selectpicker').on('onload', function () {
    $(".form-control").blur();
});

Is there a method or way to blur the select picker input text after using the toggle?

Libraries;

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js

https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js

thanks.

Upvotes: 0

Views: 1355

Answers (1)

Erdogan
Erdogan

Reputation: 990

It solved when I handled the focus event.

$(document).ready(function () {

    var blurState = false;

    $('.bs-searchbox .form-control').on('focus', function () {
        if (!blurState) {
            $(this).blur();
            blurState = true;
        }
    });

    $('.selectpicker').on('hide.bs.select', function () {
        blurState = false;
    });
});

Upvotes: 0

Related Questions