Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS erros are thrown when using bootstrap select on js-generated select #2236

Closed
latuszek opened this issue Mar 18, 2019 · 11 comments
Closed

Comments

@latuszek
Copy link

I have a piece of code with two selects A and B.
Select B have <option> elements generated (based on async data requested from the server) when the value of select A is being changed.

I can see two kind of errors thrown in the console, when I'm clicking on option from select B:

  1. When select B has an only single option:
Uncaught TypeError: Cannot read property 'firstChild' of undefined
    at Selectpicker.setSelected (bootstrap-select-564785dddfe37ad5fb8b7486de8ef19d.js:2236)
    at HTMLAnchorElement.<anonymous> (bootstrap-select-564785dddfe37ad5fb8b7486de8ef19d.js:2432)
    at HTMLDivElement.dispatch (jquery-fb2d334dabf4902825df4fe6c2298b4b.js:5226)
    at HTMLDivElement.elemData.handle (jquery-fb2d334dabf4902825df4fe6c2298b4b.js:4878)
  1. When select B has more than one option:
Uncaught TypeError: Cannot read property 'classList' of null
    at Selectpicker.render (bootstrap-select-564785dddfe37ad5fb8b7486de8ef19d.js:1757)
    at HTMLSelectElement.change (bootstrap-select-564785dddfe37ad5fb8b7486de8ef19d.js:2571)
    at HTMLSelectElement.dispatch (jquery-fb2d334dabf4902825df4fe6c2298b4b.js:5226)
    at HTMLSelectElement.elemData.handle (jquery-fb2d334dabf4902825df4fe6c2298b4b.js:4878)
    at jQuery.fn.init.$.fn.triggerNative (bootstrap-select-564785dddfe37ad5fb8b7486de8ef19d.js:388)
    at HTMLAnchorElement.<anonymous> (bootstrap-select-564785dddfe37ad5fb8b7486de8ef19d.js:2516)
    at HTMLDivElement.dispatch (jquery-fb2d334dabf4902825df4fe6c2298b4b.js:5226)
    at HTMLDivElement.elemData.handle (jquery-fb2d334dabf4902825df4fe6c2298b4b.js:4878)

I'm not sure if I will be able to create a code snippet to reproduce it, but let me know if the stack traces are not enough.

@caseyjhol
Copy link
Member

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case (you can use our preconfigured Plunker), and report back with:

  • your link
  • Bootstrap version
  • bootstrap-select version
  • specific browser and OS details.

@caseyjhol
Copy link
Member

At the very least it'd be helpful if you told what version of bootstrap-select you're using. The stack traces don't do me much good if I don't know which file to look at.

@latuszek
Copy link
Author

latuszek commented Mar 21, 2019

The versions are:
bootstrap-select: 1.13.7
bootstrap: 3.3.7

Sorry for not creating a test case, but I do not have much time right now.

@caseyjhol
Copy link
Member

How are you detecting changes to Select A? Native change event? Or changed.bs.select? Are you calling selectpicker('refresh') on Select B after?

https://plnkr.co/edit/DTah6RckOoq9WGKBwUxO?p=preview

@latuszek
Copy link
Author

The changes are detected by calling $("#select-A").change(function() { //... }). However, the difference with your code is that that in my case selectpicker are redrawn with .selectpicker("destroy").selectpicker();. I'm not sure why it's done this way - but probably something that we set dynamically wasn't working correctly with the standard render or refresh methods.

@caseyjhol
Copy link
Member

@latuszek
Copy link
Author

I will to that (hopefully) today and get back to you.

@latuszek
Copy link
Author

@caseyjhol sorry for the delay. The issue is fixed in those files.

@caseyjhol
Copy link
Member

caseyjhol commented Mar 27, 2019

It looks like the source of the 2nd issue was actually caused by a non-namespaced change event associated with the select element. After selectpicker('destroy'), the event wasn't being removed, so multiple events were firing when a new instance of bootstrap-select was initiated.

I was never able to reproduce the first issue (on a single, standard select), but it looks like it's been fixed after a refactor of the code. Hopefully the refactor actually resolved the issue and didn't just bury it. If you ever get a chance to get me a demo of the first issue (a select with only a single option) using v1.13.7, I'd appreciate it.

@dimegalev
Copy link

dimegalev commented Mar 29, 2019

I've encountered the first issue when I was trying to implement a quick insert via ajax call when no records were found by the live search. I added a custom message to the noneResultsText property upon initialization containing an <a> tag that has an onclick event. Triggering the onclick event produces the error mentioned.

Here is a jsfiddle which produces pretty much the same error. Guess I don't need to specify the versions of the resources as you can see them on the fiddle itself.

https://jsfiddle.net/dimegalev/eyghf1oL/2/

@caseyjhol
Copy link
Member

Released in v1.13.9!

@dimegalev Thanks for the fiddle. Your specific issue is occurring because there is a click listener on link elements inside the menu. It's expecting any link that's clicked to be related to an available option in the menu. It's such a fringe case, I'm not sure I can do anything about that for now (you could use a span tag instead of a). You'll want to follow and 👍 #990.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants