Mdb-ui-kit: checkbox issue with Angular 4

[nitinht1988]

Test Case

I don't have Codepen URL as i am working on big project in angular and having issue related to checkbox in that

Summary

browser/OS : Chrome/Win 7

in my project i have added bootstrap-material-design.min.js and bootstrap-material-design.min.css. Also i have added below line in my app js:
$('body').bootstrapMaterialDesign({ });

All checkboxes and radios are working fine on initial load. Because as it is angular 4 my project will load only once. But after that if i switch to another page and come down to same page again i don't see any checkboxes but can see radios and other controls.

Expected result

checkboxes should be there even after initial load as well.

Additional Information

Here is the code

<div class="checkbox">
                            <label>
                                <input type="checkbox"> Check me out
                            </label>
                        </div>

and in the browser it looks like this

<span class="bmd-form-group is-filled"><div _ngcontent-c4="" class="checkbox">
                                <label _ngcontent-c4="">
                                    <input _ngcontent-c4="" id="checkbox" name="check1" type="checkbox"><span class="bmd-switch-track"></span>
                                </label>
                            </div></span>

Please help.

[FezVrasta]

Dupe of https://github.com/FezVrasta/bootstrap-material-design/issues/1042

[nitinht1988]

@FezVrasta I have already added arrive.js in my project but still its not working. The issue is with Checkboxes only. Radios and switches are working fine for me.
issue #1042 seems like version 3 issue. I am using version 4.

[FezVrasta]

The process is the same. Anyway without a CodePen I can't help you further unfortunately. I would have to manually setup an AngularJS environment, thing I never done before.

[nitinht1988]

@FezVrasta one question: Do i need to include bootstrap js? Currently i have included following js in the same sequence:

jquery.min.js
popper.min.js
arrive.min.js
bootstrap-material-design.min.js

[FezVrasta]

Nope, it's not required

[visesh-p]

@FezVrasta I still see this issue, even after including arrive.js.
I have two screens - one with checkboxes dynamically added, and another with dynamically added switches.
If I load the screen with switches first, and then load the one with checkboxes, the switches load fine, but the checkboxes only have their labels. If I try it the other way round, both components work fine.
It's really weird and I'm finding it hard to debug.
I don't want to create a separate issue because it would be a duplicate.

[FezVrasta]

Make sure you are including Arrive.js before this project's javascript.

[visesh-p]

@FezVrasta Yes, I am including arrive.js before bootstrap-material. Specifically in the exact order as mentioned above:
jquery.min.js
popper.min.js
arrive.min.js
bootstrap-material-design.min.js

[FezVrasta]

Sorry without a repro I don't know how to help :-(

[visesh-p]

If it was a problem with my order of inclusion, none of the components would load properly. But I just mentioned that the switches load fine. Its just the checkboxes.

[visesh-p]

@FezVrasta steps to reproduce are these:
Use JS to:

1. Add a few switches dynamically to DOM.
2. Now add a few checkboxes.
   Checkboxes are not visible, you can only see the labels.
   Switches load fine.
   Now try the reverse.
3. Add a few checkboxes dynamically to DOM.
4. Now add a few switches.
   Both will work fine now.

Hope this helps. Thank you for your work. I'm from an A.I. startup in the US and we are trying to get a product out by the end of the month. We really love what you've done and would like to donate to your team after our product is out, as a token of appreciation.

[FezVrasta]

Please provide a codepen, with that I can dedicate some time to look into the problem.

[visesh-p]

@FezVrasta thank you for responding quickly. I will send you one as soon as I can. Thanks!

[clayton-ward]

I am having a very similar issue. If I view a component that has a switch element and then navigate to a component that has a checkbox, the checkbox does not appear.

I have a plnkr that demonstrates this: https://embed.plnkr.co/tTYGtJ6xj6IDNrMnlREW/

To reproduce: Click on the "Checkbox" button to show a checkbox, then click on the "Switch" button to show a switch, then click on the "Checkbox" button and the checkbox is not visible.

[FezVrasta]

Thanks, does it happens with plain JS?

[clayton-ward]

I haven't seen this issue with plain JS.

Another thing I noticed when inspecting the element is that when the checkbox appears, the HTML is:

<div class="checkbox">
  <label>
    <input type="checkbox">
    <span class="checkbox-decorator"><span class="check"></span>
    <div class="ripple-container"></div></span> Checkbox
  </label>
</div>

However, after I show a switch element and then inspect the checkbox element, the HTML shows up as this:

<div class="checkbox">
  <label>
    <input type="checkbox"><span class="bmd-switch-track"></span> Checkbox
  </label>
</div>

This issue appears for me using Safari, Chrome, and Firefox on OSX.

Hope this helps!

[FezVrasta]

I wonder if it's something Angular is doing to reuse the input element, which then doesn't get intercepted by Arrive.js.

Unfortunately the JS shipped with this project isn't really meant to be used with frameworks like these, because they need to take control of the DOM to properly work.

It may be easier to re-implement the JS functionality in Angular.

[n1474335]

This is definitely still an issue using plain JS. Here is an example using the simplest code I can come up with: https://codepen.io/anon/pen/jKayvw?editors=1010

Angular is not the problem.

[FezVrasta]

@n1474335 you are messing with the DOM when you use the innerHTML in that way.

https://codepen.io/FezVrasta/pen/eKegXK?editors=1010

[n1474335]

Yes, good point. The issue still stands though. If you add a checkbox after a switch, only the label shows up.

[lxalln]

@FezVrasta @n1474335 The buggy checkbox in the above codepen has a <span class="bmd-switch-track"></span> directly next to the checkbox. Sounds like that's an element that's meant to be part of a switch, which definitely makes it sound like a bmd bug.

Is there a work around to this?

[NicolasPerego]

Any news on this issue?