Updated ticket
Steps to Reproduce
https://zkfiddle.org/sample/1n09ir9/2-Another-new-ZK-fiddle
Run fiddle
Click 2nd tab, click 3rd tab
Current result
ckez.wpd:374 Uncaught TypeError: Cannot read properties of undefined (reading 'frameElement') at CKEDITOR.editor.resize (ckez.wpd:374:338) at init._syncSize (ckez.wpd:1624:11) at init.onShow (ckez.wpd:1589:9) at _invoke (zk.wpd:15655:14) at init.fire (zk.wpd:15641:9) at _fire (zk.wpd:15798:13) at Object.fireDown (zk.wpd:16031:7) at Object.fireDown (zk.wpd:17966:28) at Object.fireShown (zk.wpd:18870:14) at opts.afterAnima (zk.wpd:16484:16)
Expected Result
No Error
Debug Information
Caused by zjq.slideDown and zjq.slideUp called by Tabpanel._sel
SlideDown/SlideUp create a wrapper copy of the container which they animate
CKEditor registers mutationobserver listeners on the DOM element of the CKEditor which causes it try to make operations on a non-existent ckeditor object
Also triggered by Groupbox.setOpen (calling slideUp/slideDown)
Workaround
modify the Tab widget to allow for skipping animation, add the w:skipAnimation="true" on the tabpannel which contain a ckeditor
<zk xmlns:w="client" xmlns:ca="client/attribute"> <script><![CDATA[ zk.afterLoad("zul.tab", function () { var _xTab = {}; zk.override(zul.tab.Tab.prototype, _xTab, { _sel: function _sel(toSel, notify) { var tabbox = this.getTabbox(); /* ZK-1441 * If tabbox is animating (end-user click different tabs quickly), ignore this action. */ if (!tabbox || tabbox._animating) return; var panel = this.getLinkedPanel(), inAccordion = tabbox.inAccordionMold(); if (toSel) { var ps; if (ps = tabbox.tabpanels) { if (ps._selPnl && ps._selPnl != panel) ps._selPnl._sel(false, inAccordion && !panel.skipAnimation); ps._selPnl = panel; //stored in tabpanels } tabbox._selTab = this; } if (!this.desktop) return; if (toSel) jq(this).addClass(this.$s('selected'));else jq(this).removeClass(this.$s('selected')); if (panel && panel.isVisible()){ panel._sel(toSel, !panel.skipAnimation); } if (!inAccordion) { var tabs = this.parent; if (tabs) tabs._fixWidth(toSel); //ZK-2810: don't set height to tabbox when deselect } if (toSel) { if (tabbox.isVertical()) tabs._scrollcheck('vsel', this);else if (!tabbox.inAccordionMold()) tabs._scrollcheck('sel', this); } if (notify) this.fire('onSelect', { items: [this], reference: this.uuid }); } }); }); ]]></script> ... <tabpanel w:skipAnimation="true"> <ckeditor id="ck1" height="100%" width="100%" /> </tabpanel>
Original ticket below
Steps to Reproduce
run the attached zulNavigate through tabs until it hangs because of a Javascript error.
I created a ZK fiddle here : https://zkfiddle.org/sample/3ekf2c8/1-CkEditor-in-accordion-tabs-error
Current Result
A Javascript error occurs in the browser console and the navigation between tabs is no longer possible.
Uncaught TypeError: Cannot read properties of undefined (reading 'frameElement')
at a.CKEDITOR.editor.resize (ckez.wpd;jsessionid=wlx5i3sealr4:374:338)
at init._syncSize (ckez.wpd;jsessionid=wlx5i3sealr4:1624:11)
at init.onShow (ckez.wpd;jsessionid=wlx5i3sealr4:1589:9)
at _invoke (zk.wpd;jsessionid=wlx5i3sealr4:15655:14)
at init.fire (zk.wpd;jsessionid=wlx5i3sealr4:15641:9)
at _fire (zk.wpd;jsessionid=wlx5i3sealr4:15798:13)
at Object.fireDown (zk.wpd;jsessionid=wlx5i3sealr4:16031:7)
at Object.fireDown (zk.wpd;jsessionid=wlx5i3sealr4:17966:28)
at Object.fireShown (zk.wpd;jsessionid=wlx5i3sealr4:18870:14)
at HTMLDivElement.opts.afterAnima (zk.wpd;jsessionid=wlx5i3sealr4:16484:16)
Uncaught TypeError: Cannot read properties of undefined (reading 'getComputedStyle')
at $.CKEDITOR.tools.extend.getComputedStyle (ckez.wpd:111:382)
at $.getDirection (ckez.wpd:134:386)
at $.setup (ckez.wpd:404:80)
at $.x (ckez.wpd:1023:341)
at ckez.wpd:33:138
Expected Result
No error.
Debug Information
Firefox 96.0.3, chrome 99
JavaScript error :
Uncaught TypeError: k is null
resize https://temp.zkfiddle.org:1223/t961/zkau/web/_zv4.16.2.0/js/ckez.wpd:375
_syncSize https://temp.zkfiddle.org:1223/t961/zkau/web/_zv4.16.2.0/js/ckez.wpd:1624
onShow https://temp.zkfiddle.org:1223/t961/zkau/web/_zv4.16.2.0/js/ckez.wpd:1589
_invoke https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:15677
fire https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:15663
_fire https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:15820
fireDown https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:16053
fireDown https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:17988
fireShown https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:18892
afterAnima https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:16506
fire https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:3206
fireWith https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:3323
tick https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:6774
tick https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:7081
schedule https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:6463
- relates to
-
ZK-5354 Replace animation implementation with CSS
- Closed