Upgrade project to bs5 issues

[psweb]

I upgraded a project from bs4 to bs5, pretty simple, all works well, but have some minor differences such as
I had custom toggles before, that on modal close would auto switch themselves off if they were on, however they no longer do that.
I think it is this file from the old project, that seems like it has no new bs5 version.

<script src="dmxAppConnect/bs-custom-file-input/bs-custom-file-input.min.js"></script>

Can anyone confirm please.

bs4 code for reference

<div class="modal fade" id="modalTagAdder" is="dmx-bs4-modal" tabindex="-1" role="dialog" dmx-on:hide-bs-modal="switchTagEditor.setValue(switchTagEditor.select(false))">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tag Manager</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">X</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <p>Tag Manager, no spaces, no special characters, use CamelCase to distinguish word breaks.</p>
                    <form id="formAdminTagNew" method="post" is="dmx-serverconnect-form" action="api/image-manager/tags/tag-add" dmx-on:success="formAdminTagNew.reset();sctaglist.load()" class="mb-4 pkt-footer-underline pb-4">
                        <div class="input-group">
                            <input id="textTagNew" name="textTagNew" type="text" class="form-control" placeholder="Example: ArcticWolf" aria-label="Example: ArcticWolf" aria-describedby="btnTagNew" required="" data-rule-lettersonly=""
                                data-rule-nowhitespace="">
                            <div class="input-group-append">
                                <button class="btn btn-outline-success" type="submit" id="btnTagNew">Add Tag</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div>
<!-- NOT WORKING BS5 -->
                    <div class="custom-control custom-switch text-right">
                        <input type="checkbox" class="custom-control-input" id="switchTagEditor">
                        <label class="custom-control-label" for="switchTagEditor">Enable/Disable Editor</label>
                    </div>
<!-- NOT WORKING BS5 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover table-sm">
                            <thead>
                                <tr>
                                    <th>Current Tags</th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="sctaglist.data.queryTags" id="tableRepeat1">
                                <tr>
                                    <td>
                                        <span dmx-hide="switchTagEditor.checked">{{mit_tag_name}}</span>
                                        <form id="formAdminTagEdit" method="post" is="dmx-serverconnect-form" class="form-inline" action="api/image-manager/tags/tag-edit" dmx-on:success="formAdminTagEdit.reset();sctaglist.load()"
                                            dmx-show="switchTagEditor.checked">
                                            <input id="textTagEditId" name="textTagEditId" type="hidden" class="form-control" required="" dmx-bind:value="mit_id">
                                            <div class="input-group w-100">
                                                <input id="textTagEdit" name="textTagEdit" type="text" class="form-control" required="" data-rule-lettersonly="" data-rule-nowhitespace="" dmx-bind:value="mit_tag_name">
                                                <div class="input-group-append">
                                                    <button id="btnTagEdit" class="btn btn-outline-success" type="submit">Save Edit</button>
                                                    <button class="btn btn-outline-danger" dmx-on:click="sctagdelete.load({delete_tag_id: mit_id});sctaglist.load()"><i class="far fa-trash-alt fa-fw text-danger"></i></button>
                                                </div>
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Edit: Just checked the bs-custom-file-input.min.js file, and it is not that, so I am not sure what it is to be honest.

[ben]

Have you tried the Bootstrap 5 version of the switch?

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked">
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

[psweb]

Yeah I tried it, and it works, however can not seem to find a way to control its on/off state on modal close.
dmx-on:hide-bs-modal="switchTagEditor.setValue(switchTagEditor.select(false))"
No longer seems to do anything.

[George]

@psweb

switchTagEditor

Make sure you got the right input id for your switchTagEditor

[psweb]

Did you see it wrong somewhere George, I have relooked at the id for a while now and can not see anywhere where it is different, they all say switchTagEditor

Update: if I use the console with
dmx.parse("content.switchTagEditor.setValue(content.switchTagEditor.select(false))")
I can make it turn on or off, so it must be something to do with the dmx-on:hide-bs-modal not firing it or something.

Is there a way I can check in console whats happening when the modal closes

[George]

Well in the example from Ben it is called flexSwitchCheckChecked

[ben]

I am not sure what it is that you want to do. Maybe the following example will help.

<!doctype html>
<html>

<head>
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <script src="dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer=""></script>
    <script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
</head>

<body is="dmx-app" id="index">
    <div class="container mt-5">
        <div class="row">
            <div class="col">
                <button id="btn1" class="btn btn-lg btn-primary" dmx-on:click="modal1.show()">Button</button>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" id="switchTagEditor" dmx-bind:checked="(value == 1)">
                    <label class=" form-check-label" for="switchTagEditor">Enable/Disable Editor</label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal1" is="dmx-bs5-modal" tabindex="-1" dmx-on:hide-bs-modal="switchTagEditor.setValue((switchTagEditor.value == 1 ? 0 : 1))">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

[psweb]

Thanks Ben, I finally managed to track down the problem, this script was missing from the head for some reason <script src="dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer=""></script> and now it all works with this dmx-on:hide-bs-modal="switchTagEditor.setValue(switchTagEditor.select(false))" as I had it right from the start, hahahaha.

[psweb]

Just while I am on this same subject @George, would you consider adding this to the pickers.
This one has the correct setValue

But this one has no select attribute to choose

[George]

Select is an action and not a data property

[psweb]

Thanks George, your answer led me to believe maybe I was misunderstanding this a little and over complicating things, which it turns out i was. Just incase anyone else is confused by this procedure, here is a rough working sample.

Just to give an idea of what this is meant to do
A user clicks a button to open a modal window showing a list of records as well as a mini form to add a single new record.

I want that toggle switch to be off by default whenever the modal loads, even if the user turns it on, then once they are finished editing and close the modal it needs to turn itself back off again.

This is what it looks like when the toggle is on

So now they can edit or delete any single record and if they close the modal it will toggle off again.

For the code, I thought I had to use the setValue like this

<!-- Works, but must be manually coded, not achievable through UI, and overly complicated. -->
dmx-on:hide-bs-modal="switchTagEditor.setValue(switchTagEditor.select(false))"

However after your answer and i looked into it more, i realised there are 2 ways i can do this, both can be achieved directly in the UI

<!-- Option 1, on modal close, turns off the toggle regardless of if it was on or off -->
dmx-on:hide-bs-modal="switchTagEditor.select(false)"

<!-- Option 2, on modal close, check if switch on, and if true turn it off, or if false do anything else, in my case just make sure it is off. -->
dmx-on:hide-bs-modal="switchTagEditor.select(switchTagEditor.checked ? false : false)"