Live Search Box Not Cleared After Selection

[bassem-mf]

I believe that this is a major usability problem if the select element is intended to be used more than once for example to add items to a list.

Steps to reproduce the problem using the first Live Search example on this page
http://silviomoreto.github.io/bootstrap-select/examples/#live-search

1. Click the select element
2. Type something
3. Hit "Enter" to select the element
4. Optionally switch the focus to another element (Tab) then return the focus to the select element (Shift + Tab)
5. Type something else.

You will see that the new search text is appended to the old search text. I believe the expected behavior would be to start a new search.

Workaround:

Clear the live search box on hidden.bs.select

$('select.combobox').selectpicker({
        liveSearch: true
    }).on('hidden.bs.select',
        function () {
            $(this).data('selectpicker').$searchbox.val('').trigger('propertychange');
        });

I think that this needs to be the default behavior.

[caseyjhol]

Available in v1.13.0-alpha.

[pepijnolivier]

@caseyjhol

First of all, thanks for this package! :)

This is still somewhat an issue with bootstrap 4, on 1.13.9.
I'm using a searchable multi-select.

I would expect the search field to be cleared after searching and selecting (via enter), so I can easily search and enter again.

---

I can easily add this behaviour though!
Very similar to the above, however I'm clearing the search on changed.bs.select (rather than hidden.bs.select)

React code below:

import React from 'react';

class MyBootstrapSelect extends React.Component {

    componentDidMount() {
        window.jQuery('#bs-select').selectpicker()
        .on('changed.bs.select', function() {
            window.jQuery('#bs-select').data('selectpicker').$searchbox.val('').trigger('propertychange');
        });
       ;
    }

    render() {
        return (
            <select className="selectpicker" id="bs-select" multiple data-live-search="true">
                <option>Mosterd</option>
                <option>Ketchup</option>
                <option>Barbecue</option>
                <option>Mayonaise</option>
                <option>Samoerai</option>
                <option>Joppie</option>
                <option>Cocktail</option>
            </select>

        )
    }
};

export default MyBootstrapSelect;