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

Dynamically added picker causes resize JS error #2105

Closed
pbrf01 opened this issue Sep 20, 2018 · 2 comments
Closed

Dynamically added picker causes resize JS error #2105

pbrf01 opened this issue Sep 20, 2018 · 2 comments

Comments

@pbrf01
Copy link

pbrf01 commented Sep 20, 2018

Dynamically added and then hidden select pickers cause a JS error when you resize the browser. To reproduce:
https://plnkr.co/edit/PnylbTpbC6AZhZIh0OXi?p=preview

  1. Click 'Add Picker' button to dynamically create a new bootstrap-select picker.
  2. Select an option.
  3. Click 'Disable Picker' button to hide the selectpicker (destroy causes the same behavior).
  4. Resize the browser. You'll get a JS error about the resizing (lots of errors actually):
"bootstrap-select.js:820 Uncaught TypeError: Cannot read property '0' of undefined
    at scroll (bootstrap-select.js:820)
    at bootstrap-select.js:918
    at dispatch (jquery.min.js:3)
    at q.handle (jquery.min.js:3)"

I believe it's only when the select picker is dynamically added and then removed.

Happens in: IE 11, Firefox 52, Chrome 66 and 68, Safari 10. Both Windows and Mac OS.
Environment: Bootstrap 4.1.x, bootstrap-select 1.13.2

This may or may not relate to Issue #2034.

@WizardCM
Copy link

I've come across a similar issue, and I believe it's part of a larger problem.

There are two issues here:

  1. The big one - a lot of the event functions (in my case getSelectPosition) either don't use the target in the event, or always expect the element to exist and be visible, which isn't always the case. When it's not the case, it immediately errors instead of cancelling.
  2. The reason the issue still occurs on destroy, is because the destroy function doesn't actually remove any event hooks. This one is a big big big memory leak in my opinion, and a problem in general because every time .selectpicker() is run on an element, even after a 'destroy', the event hooks for scroll and resize are stacked. And stacked. And stacked. It's really, really bad.

caseyjhol added a commit that referenced this issue Oct 25, 2018
…2118). Only call getPlacement and scroll functions on resize/scroll if the menu is open (#2105, #2034)
@caseyjhol
Copy link
Member

Released in v1.13.4!

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