Kendo Switch 'k-switch-container' applied multiple times - once every time I call the 'check' method.

[Kevin]

I'm using UI for ASP.NET Core  release 2021.3.1207

I have a modal dialog, containing a Switch control plus a few other controls, that is displayed when a button is pressed.

When I simply show the modal, all is fine.

When I try to set the value of the Switch 'check' then show the modal, the switch is being re-initialized and there are TWO 'k-switch-container' tagsets. Closing the dialog and showing again adds a THIRD 'k-switch-container'.  etc. etc.

These extra 'k-switch-container' effects are:

- cannot tab directly to the next field, as focus disappears until TAB is pressed again.  Happens for every additional <span> so eventually you need to press multiple tabs just to visit the next field.

- also when you are 'focussed' on one of these phantom locations, you can still press SPACE which toggles the Switch.

Have I done something wrong or is this a bug?

Thanks,

 

My Dialog

<div class="modal-body">
    <form id="frmEvent" novalidate="novalidate" class="form-validation">
        <div class="form-group">
            <label>@L("Title")</label>
            <input id="txtTitle" type="text" class="form-control border-2" placeholder="@L("title")" />
        </div>
        <div class="mb-2">
            <div class="form-group">
                @(Html.Kendo().Switch()
                        .Events(ev => ev.Change("onChangeAllDay")) 
                        .Name("swAllDay")
                )
                <label class="ml-2 mb-2">
                    @L("AllDayEvent")
                </label>
            </div>
        </div>

        ....

    </form>
</div>

 

My Button Event

** if I uncomment these two lines, I start getting additional nested k-switch-container span tags upon EVERY show of the modal

function newEvent() {
    var today = new Date();
    $("#txtTitle").val('');
    $("#txtDescription").val('');
    $("#StartDatePicker").val(today.toLocaleDateString(kendoCurrentCulture));
    $("#StartTimePicker").val('');
    //var allDaySwitch = $("#swAllDay").kendoSwitch().data("kendoSwitch");
    //allDaySwitch.check(false);
    $("#eventModal").modal('show');
}

Here's the HTML after just loading the modal WITHOUT setting check.

<div class="form-group">
    <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
        <input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
        <span class="k-switch-container">
            <span class="k-switch-label-on">On</span>
            <span class="k-switch-label-off">Off</span>
            <span class="k-switch-handle"></span>
        </span>
    </span>
    <input name="swAllDay" type="hidden" value="false">
    <script>kendo.syncReady(function(){jQuery("#swAllDay").kendoSwitch({"change":onChangeAllDay});});</script>
    <label class="ml-2 mb-2">
        All Day Event
    </label>
</div>

Here's the HTML after just loading the modal WITH setting check, several times.

<div class="form-group">
    <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
        <span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
            <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
                <span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
                    <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
                        <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
                            <input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
                            <span class="k-switch-container">
                                <span class="k-switch-label-on">On</span>
                                <span class="k-switch-label-off">Off</span>
                                <span class="k-switch-handle">
                                </span>
                            </span>
                        </span>
                        <span class="k-switch-container">
                            <span class="k-switch-label-on">On</span>
                            <span class="k-switch-label-off">Off</span>
                            <span class="k-switch-handle"></span>
                        </span>
                    </span>
                    <span class="k-switch-container">
                        <span class="k-switch-label-on">On</span>
                        <span class="k-switch-label-off">Off</span>
                        <span class="k-switch-handle"></span>
                    </span>
                </span>
                <span class="k-switch-container">
                    <span class="k-switch-label-on">On</span>
                    <span class="k-switch-label-off">Off</span>
                    <span class="k-switch-handle"></span>
                </span>
            </span>
            <span class="k-switch-container">
                <span class="k-switch-label-on">On</span>
                <span class="k-switch-label-off">Off</span>
                <span class="k-switch-handle"></span>
            </span>
        </span>
        <span class="k-switch-container">
            <span class="k-switch-label-on">On</span>
            <span class="k-switch-label-off">Off</span>
            <span class="k-switch-handle"></span>
        </span>
    </span>
    <input name="swAllDay" type="hidden" value="false">
    <script>kendo.syncReady(function () { jQuery("#swAllDay").kendoSwitch({ "change": onChangeAllDay }); });</script>
    <label class="ml-2 mb-2">
        All Day Event
    </label>
</div>

 

 

 

 

[Kevin]

Answering my own question...  this "  .kendoSwitch() " is not required !!!

var allDaySwitch = $("#swAllDay").kendoSwitch().data("kendoSwitch");