Search and Top Navigation
#15343 new bug ()
Opened May 28, 2019 11:02AM UTC
Last modified May 28, 2019 11:02AM UTC
References held to select and option elements after selectmenu('destroy') call
Reported by: | garycuthbert | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.selectmenu | Version: | 1.12.1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Following feedback from a question i posted on the forum:
https://forum.jquery.com/topic/selectmenu-widget-correct-usage-of-destroy
I thought it would be worth raising this as a potential issue.
I am looking at memory usage in our web app and have been using the chrome developer memory tool (under windows 10) to take heap snapshots before and after certain actions. One such issue appears to be coming from the selectmenu widget.
I have created a codepen that shows the behaviour seen:
https://codepen.io/garycuthbert/pen/dEjvyq
If you:
1. Run the codepen under chrome (i used incognito mode) and access the memory developer tools.
2. Collect the garbage (dustbin icon) and take an initial heap snapshot.
3. Click 'Create Combobox' and observe that a combo box is added to the output.
4. Click 'Remove ComboBox' and observe that the combo box is removed from the output.
5. Return to the memory tools and collect the garbage (you may need to wait a few seconds and click the icon a couple of times until the heap size stops reducing).
6. Take another heap snapshot.
7. Select the second snapshot, view the summary with 'Detached' in the view filter and select 'Objects allocated between Snapshot 1 and Snapshot 2'
8. Expand the 'Detached HTMLSelectElement' node and hover over the 'Detached' text of the sub item, you should see 'select.soloComboSelect'.
Screenshot:
https://monosnap.com/file/4sHYv6pl6LTWQMMVfzalDILYazIHNE
I believe i am making the necessary calls to clear the DOM of the combobox but the heap comparison appears to suggest that the selectmenu widget is holding onto a reference to the select node.
In the codepen function 'destroyCombo' you can see that i explicitly clear the select node of options and call selectmenu('refresh') before calling selectmenu('destroy), without this extra step i see detached option elements that correspond to each of the 7 options added to the select node, screen shot:
https://monosnap.com/file/CkztRik4XBuoNoanFJDhKtvFjEfPNK
Our app and the codepen both use v1.12.1 of jqueryui. Our app uses this with jquery v3.1.0 but the same behaviour is seen on the codepen using jquery v3.4.1.