Radio button groups are not working after migrating TheAdmin theme from BS4 to BS5

[MikeAlhayek]

Describe the bug

When using Radio button group in the Admin theme, selecting a radio button does not select.

To Reproduce

Steps to reproduce the behavior:
Create a view anywhere in admin using TheAdmin theme and place the following HTML code

<form>
            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
               <div class="btn-group btn-group-sm me-2" role="group" aria-label="Sort">
                  <input type="radio" class="btn-check" value="Profit" id="Sort_ByProfit" autocomplete="off" checked="checked" data-val="true" data-val-required="The By field is required." name="Sort.By">
                  <label class="btn btn-outline-secondary" for="Sort_ByProfit">Profit</label>
                  <input type="radio" class="btn-check" value="Year" id="Sort_ByYear" autocomplete="off" name="Sort.By">
                  <label class="btn btn-outline-secondary" for="Sort_ByYear">Year</label>
                  <input type="radio" class="btn-check" value="Cost" id="Sort_ByCost" autocomplete="off" name="Sort.By">
                  <label class="btn btn-outline-secondary" for="Sort_ByCost">Cost</label>
                  <input type="radio" class="btn-check" value="Odometer" id="Sort_ByOdometer" autocomplete="off" name="Sort.By">
                  <label class="btn btn-outline-secondary" for="Sort_ByOdometer">Odometer</label>
                  <input type="radio" class="btn-check" value="Status" id="Sort_ByStatus" autocomplete="off" name="Sort.By">
                  <label class="btn btn-outline-secondary" for="Sort_ByStatus">Status</label>
                  <input type="radio" class="btn-check" value="DaysInStock" id="Sort_ByDaysInStock" autocomplete="off" name="Sort.By">
                  <label class="btn btn-outline-secondary" for="Sort_ByDaysInStock">Days In Stock</label>
               </div>
               
            </div>
</form>

Now run the app and click on any of the radio buttons, you'll notice that the button do not appear selected. This works perfectly fine in other themes like TheTheme theme from the front end.

Expected behavior

When you click on the radio button, it should appear darker "selected"

Screenshots

Here is a screen cast of TheAdmin theme where it does not stay selected as well as TheTheme theme in the front end with the expected behavior

@agriffard @Skrypt

[Skrypt]

This is a button "active" state behavior that can be seen by going to the browser dev tools and checking the :active state of the element. As you can see the styles are working appropriately. The issue is that the state is not toggled on the "click" event of the buttons.

<script at="foot">
$(document).ready(function(){
    $(".btn").click(function(){
        $(this).button("toggle");
    });
});
</script>

Adding this script to your page will make it work in the admin. Though, I don't understand the difference between the admin and the frontend themes here. I removed every javascript links in TheAdmin to test this and the active state is still not triggered by clicking on the button elements.

[MikeAlhayek]

@Skrypt neither of the following worked

<script at="Foot">
    $(document).ready(function() {
        $(".btn").click(function() {
            $(this).button("toggle");
        });
    });
</script>

or

<script at="Foot">
    $(document).ready(function() {
        $(".btn-check").click(function() {
            $(this).button("toggle");
        });
    });
</script>

I also attempted to add data-bs-toggle="button" element to each radio input. This adds the active class to each input but the color of it does not change. Bootstrap 5.1 example does not show that the element data-bs-toggle="button" is needed.

[Skrypt]

Ok, I found out how to fix the issue. Though it will break the darkmode admin theme. Need to try different things and evaluate if it is worth it. The issue is that we have a darkmode which is not fully supported by Bootstrap 5. It should be fully supported by Bootstrap 6.

orchard.mp4

Here is what I tried :

[MikeAlhayek]

This was fixed after migration to BS 5.3!