Option to not focus live search when opened

[isobel-cullen]

Hello,

I would like to be able to include a search field but not have it focused when the control is opened. This is quite annoying on devices with onscreen keyboards where we do not want to go back to just using the native control.

I can't see if this is possible from reading the documentation or a quick look over the code.

Regards

[nithin-ideas2it]

+1

[dipeshcct]

@caseyjhol can you please tell me where is solution for this?

[amitsquare]

Source Lines for Focus

Either comment it out for permanent effect Or pass additional option along with Select . <select class="selectpicker" data-live-search="true" data-focus-off="true"> <option>test1</option> <option>test2</option> <option>test3</option> </select> Then update above mentioned source lines like this .. if(!that.options.focusOff){ setTimeout(function () { that.$searchbox.focus(); }, 10); }

hope this will help you out

[RALGIE]

I have the same problem. When I'm on an IPAD and I select a value in the list the search field is focused and the onscreen keyboard pops open. This is very annoying.

can you remove this behavior?

[leonidas-o]

Will this solution ever be merged into the project? Downloading and manually editing the source file isn't a good approach.

[a-vasyukov]

/* Hack for focus blur from liveSearch input */

var blurState = false;

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

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

[heyitsedward]

I have the same problem. When I'm on an IPAD and I select a value in the list the search field is focused and the onscreen keyboard pops open. This is very annoying.

can you remove this behavior?

Did you find a fix for this? I'm having the same issue.

[SewookJung]

Just Fixed the bootstrap-select.js file directly.

1. Find the setFocus funtion
2. Fixed the code

function setFocus() {
  that.$menuInner.trigger("focus");
}

Now we can used live search in moblie!

[LY1806620741]

/* Hack for focus blur from liveSearch input */

var blurState = false;

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

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

感谢这位老哥的想法,我需要移除在移动设备上自动聚焦弹出键盘的问题,以下是我修改的解答（如果是移动设备,除了直接点击输入框，一律将聚焦打散）,我的bootstrap-select版本为1.13.18（因为1.14还有未发布的问题） Thanks to this brother's idea, I need to remove the question of automatically focusing on the pop-up keyboard on the mobile device. Here is my modified answer (if it is a mobile device, it will all be focused except by clicking on the input box directly). My bootstrap-select version is 1.13.18 (because 1.14 still has unpublished questions).

        //全局变量默认拦截聚焦//Global variable default intercept focus
        window.bssearchboxBlur = true;

        $('.bs-searchbox .form-control').on('focus', function() {
            if (bssearchboxBlur&&navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|IEMobile/i)) { //移动设备生效//Mobile devices take effect
                $(this).blur();//聚焦之后模糊//blur after focusing
            }
        });
        //只有点击事件能聚焦//Only click events can focus
        $('.bs-searchbox .form-control').on('click',function() {
            bssearchboxBlur=false;
            $('.bs-searchbox .form-control').focus();
            bssearchboxBlur=true;
        });

[nik32]

/* Hack for focus blur from liveSearch input */

var blurState = false;

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

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

感谢这位老哥的想法,我需要移除在移动设备上自动聚焦弹出键盘的问题,以下是我修改的解答（如果是移动设备,除了直接点击输入框，一律将聚焦打散）,我的bootstrap-select版本为1.13.18（因为1.14还有未发布的问题） Thanks to this brother's idea, I need to remove the question of automatically focusing on the pop-up keyboard on the mobile device. Here is my modified answer (if it is a mobile device, it will all be focused except by clicking on the input box directly). My bootstrap-select version is 1.13.18 (because 1.14 still has unpublished questions).

        //全局变量默认拦截聚焦//Global variable default intercept focus
        window.bssearchboxBlur = true;

        $('.bs-searchbox .form-control').on('focus', function() {
            if (bssearchboxBlur&&navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|IEMobile/i)) { //移动设备生效//Mobile devices take effect
                $(this).blur();//聚焦之后模糊//blur after focusing
            }
        });
        //只有点击事件能聚焦//Only click events can focus
        $('.bs-searchbox .form-control').on('click',function() {
            bssearchboxBlur=false;
            $('.bs-searchbox .form-control').focus();
            bssearchboxBlur=true;
        });

The idea here is correct but it may not work for some people as it might happen that the select picker is not initialized and thus the event handlers will not be attached. So I used the above in the following way (Just a small optimizations also - The events are only attached if the user is on mobile) -

             if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){//Mobile devices take effect
                window.bssearchboxBlur = true;

                $('.selectpicker').on('loaded.bs.select', function () {    
                    const liveSearchField = document.getElementsByClassName('bs-searchbox')[0].getElementsByClassName('form-control')[0];
                    liveSearchField.addEventListener('focus', function() {
                        if (bssearchboxBlur) {
                            liveSearchField.blur();//blur after focusing
                        }
                    });
                    //Only click events can focus
                    liveSearchField.addEventListener('click',function() {
                        bssearchboxBlur=false;
                        liveSearchField.focus();
                        bssearchboxBlur=true;
                    });
                });
            }