Uncaught TypeError: Cannot use 'in' operator to search for 'Dropdown' in null

[ezerr]

I get the below error.
Uncaught TypeError: Cannot use 'in' operator to search for 'Dropdown' in null on bootstrap-native.min.js:2

I'm using AngularJS to conditionally render the dropdown html and associated button. After opening the "More..." dropdown, I'm hitting on the "Edit" button (which changes the route and hides the button grouping <div class="btn-group" ng-if="condition">...</div>).
https://i.imgur.com/klPIOqZ.png

After the edit button, the dropdown goes away (which is good), but I get the following error:
https://i.imgur.com/AkSNDH1.png

Which takes me to this line when I click on it:
https://i.imgur.com/YfdlSTS.png

I'm simply reporting this to get this fixed on the repo. I already have a solution to this. Unfortunately, I'm unable to easily replicate this bug on jsFiddle without using AngularJS, which is what I suspect is causing this, because my example without AngularJS on jsFiddle works fine.

I was able to fix this by updating this code:
("Dropdown"in i||"Dropdown"in i[d]) into ("Dropdown"in i||i[d] && "Dropdown"in i[d])

Note that I'm adding i[d] && which is simply checking that i[d] exists before evaluating "Dropdown"in i[d]. Thanks for reading and your time.

[thednp]

BSN version?

[ezerr]

Whoops. It's v2.0.26.

[thednp]

We need to know how you invoke the component, perhaps you expect it to do something it was never meant to do.

Also where did you apply the fix please?

[ocjojo]

For me this happened, when I called the constructor manually without there being an element.

// i.e. 
var bsn = require("bootstrap.native");
var btn = new bsn.Dropdown('.dropdown');
// throws error, if no element with '.dropdown' is found

This might happen in frontend frameworks when the above code is registered globally but the '.dropdown' element is only later added when a specific template renders.

@ezerr correct me, if it is different for you.

so it's basically a result of not initialising bootstrap.native correctly, not a problem of the library. But it might be alleviated with a fix for #102

[thednp]

For me this happened, when I called the constructor manually without there being an element.

Why attempting such a thing?

[ocjojo]

It was not on purpose. The frameworks async init process just was not yet finished, when the bootstrap code was called.

[thednp]

The library is not developed to serve async applications purposely, it doesn't do jQuery shenanigans, but gives you the full power over what happens with your elements, if you want to use it for your async apps, you need to get back to basic JavaScript.

Some resources

• BSN FAQ
• BSN Features
• the best you can actually do is implementing custom elements, as showcased here
• other resources on stackoverflow.