KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

BSelect deselect radio button #2767

Open Matt Croyle opened this topic on on Jul 26 - 8 comments

Matt Croyle commented on Jul 26

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.

Sebastian Morales commented on Jul 27

Which version of Bootstrap do you use and what exactly is the behavior when you click BSelect's Reset button? Tks,

Matt Croyle commented on Jul 27

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.

Sebastian Morales commented on Jul 28

Pls add "themeBase" => "bs4" to your BSelect's create like this:

BSelect::create(array(
    ...
    "themeBase" => "bs4", // add this property

Let us know if it works for you. Tks,

Matt Croyle commented on Jul 28

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.

Sebastian Morales commented on Aug 2

It looks like BSelect in Bootstrap 4 use a button tag for the Reset instead of an a tag. Thus it auto submits when being clicked. To fix this issue for now pls add the following function for "onReady" event in BSelect:

BSelect::create(array(
    "name"=>"multipleBSelect", // replace multipleBSelect here with your BSelect's name
    "themeBase" => "bs4",
    "multiple"=>true,
    ...
    "options" => [
        ...
        "includeResetOption" => true,
    ],
    "onReady" => "function() {
        document.querySelector('krwidget[widget-name=\"multipleBSelect\"] .multiselect-reset button').setAttribute('type', 'button'); // replace multipleBSelect here with your BSelect's name
    }"
)); 

Essentially, the function just adds type="button" to the Reset button to prevent it from auto submitting the form. We will see if there's a more elegant solution so users don't have to add this fix themselves. Tks,

Matt Croyle commented on Aug 2

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
    )
]);
Sebastian Morales commented 7 days ago

A single BSelect behaves similarly to a single html select tag. The reset button can not deselect all for single select. If you want such behavior pls try the following method:

BSelect::create(array(
    "name"=>"singleBSelect", // replace 'singleBSelect' with your BSelect name
    "themeBase" => "bs4",
    ...
    "options" => [
        "enableFiltering" => true,
        "includeResetOption" => true,
    ],
    "onReady" => "function() {
        document.querySelector('krwidget[widget-name=\"singleBSelect\"] .multiselect-reset button')
            .addEventListener('click', function() {
                $('#singleBSelect').val('').multiselect('refresh'); // replace 'singleBSelect' with your BSelect name
            });
    }"
));
Matt Croyle commented 7 days ago

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
    )
]);

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

Inputs