We're using the BSelect input type with single select mode. We would like the user to be able to deselect an option without reloading the form. The "includeResetOption" displays the reset button but the button itself does not function. Here is the code we're using in our Laravel blade template:

\koolreport\inputs\BSelect::create([
    "name" => "recent_active",
    "value" => $_POST['recent_active'] ?? null,
    "dataStore" => $report->dataStore("recentActiveSemesters"),
    "dataBind" => array(
        "text" => "readable_term",
        "value" => "term"
    ),
    "multiple" => false,
    "options" => array(
        "buttonWidth" => "100%",
        "buttonClass" => "btn btn-outline-secondary",
        "maxHeight" => 300,
        "enableFiltering" => true,
        "enableCaseInsensitiveFiltering" => true,
        "includeFilterClearBtn" => true,
        "includeResetOption" => true
    ),
    "attributes"=>array(
        "class"=>"form-control mx-2",
        "size" => 2
    )
]);

Any help is greatly appreciated.

Thanks.

Our application is using Bootstrap v4.6.1. The reset button displays but when clicked does nothing. There are no console warnings or errors displayed when it is clicked. Originally, we were including the bootstrap 4.3.1 theme via the KoolReport Bootstrap 4 package (\koolreport\bootstrap4\theme) but have since removed that. The reset button behaves the same way in either case.

That's an improvement in the button actually does something and the overall look of the inputs have improved. However, the reset button now acts as a submit button and attempts to submit the form. You can see in the screen shot that the validation is triggered when the reset button is clicked and it still doesn't clear the value.

Thanks Sebastian! That now prevents the form submitting, however, single select options still will not reset. I've uploaded a video of this in action. The code below is for the two buttons demonstrated in the video. BSelect Reset Issue

Working Multiselect:

koolreport\inputs\BSelect::create([
    "name"=>"begin",
    "placeholder" => "Select Semester",
    "value" => $_POST['begin'] ?? null,
    "multiple" => true,
    "dataStore" => $report->dataStore("semesters"),
    "themeBase" => "bs4",
    "dataBind" => array(
        "text" => "readable_term",
        "value" => "term"
    ),
    "options" => array(
        "enableFiltering" => true,
        "enableCaseInsensitiveFiltering" => true,
        "includeFilterClearBtn" => true,
        "buttonWidth" => "100%",
        "maxHeight" => 300,
        "includeResetOption" => true
    ),
    "onReady" => "function() {
        document.querySelector('krwidget[widget-name=\"begin\"] .multiselect-reset button').setAttribute('type', 'button');
    }",
    "attributes"=>array(
        "class"=>"form-control mx-2",
    )
]);

Failing Single Select:

\koolreport\inputs\BSelect::create([
    "name" => "recent_active",
    "value" => $_POST['recent_active'] ?? null,
    "dataStore" => $report->dataStore("recentActiveSemesters"),
    "dataBind" => array(
        "text" => "readable_term",
        "value" => "term"
    ),
    "themeBase" => "bs4",
    "options" => array(
        "buttonWidth" => "100%",
        "maxHeight" => 300,
        "enableFiltering" => true,
        "enableCaseInsensitiveFiltering" => true,
        "includeFilterClearBtn" => true,
        "includeResetOption" => true,
    ),
    "onReady" => "function() {
        document.querySelector('krwidget[widget-name=\"recent_active\"] .multiselect-reset button').setAttribute('type', 'button');
    }",
    "attributes"=>array(
        "class"=>"form-control mx-2",
        "size" => 2
    )
]);

This gets you close but the refresh doesn't actually clear the hidden input field that contains the selected values. I was finally able to accomplish everything by using this code, assuming your BSelect name is 'recent_active':

"onReady" => "function() {
    let recently_active = document.querySelector('krwidget[widget-name=\"recent_active\"] .multiselect-reset button');
    recently_active.setAttribute('type', 'button');
    recently_active.addEventListener('click', function() {
        $('#recent_active').val(null).multiselect('refresh');
        $('input[name=__recent_active]').val(null);
    });
}",

with the full code for a single select BSelect that allows resetting of the selected value:

\koolreport\inputs\BSelect::create([
    "name" => "recent_active",
    "value" => $_POST['recent_active'] ?? null,
    "dataStore" => $report->dataStore("recentActiveSemesters"),
    "dataBind" => array(
        "text" => "readable_term",
        "value" => "term"
    ),
    "themeBase" => "bs4",
    "options" => array(
        "includeResetOption" => true,
    ),
    "onReady" => "function() {
        let recently_active = document.querySelector('krwidget[widget-name=\"recent_active\"] .multiselect-reset button');
        recently_active.setAttribute('type', 'button');
        recently_active.addEventListener('click', function() {
            $('#recent_active').val(null).multiselect('refresh');
            $('input[name=__recent_active]').val(null);
        });
    }",
    "attributes"=>array(
        "class"=>"form-control mx-2",
        "size" => 2
    )
]);