"Uncaught TypeError: Cannot read property 'filter' of undefined " and "Uncaught TypeError: Cannot read property 'removeClass' of undefined " after widget drop

[Radoslav Petkov]

I have strange behaviour with my custom widget that does not happen on other widgets.I thought it is from my plugin.js but it seems the error comes from the CKEditor's widget api and i wanted to share the errors with you.

The attached gif shows in what situation the errors occur.

Here is the code that defines the widget

    editor.widgets.add('widgetCast', {
        template: '<div class="container-fluid layout-container">\
                        <div class="row layout-row">\
                             <div id="layout-column-one" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 layout-column">\
                                 <p>content</p>\
                             </div>\
                            <div id="layout-column-two" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 layout-column">\
                                <p>content</p>\
                            </div>\
                        </div>\
                    </div>',
        upcast: function(element) {
            return (element.name == 'div' && element.hasClass('layout-container'));
        },
        editables: {
            layoutColumn1: {
                selector: '#layout-column-one',
                allowedContent: allowedContent
            },
            layoutColumn2: {
                selector: '#layout-column-two',
                allowedContent: allowedContent
            }
        },
        allowedContent: allowedContent
    });

[Radoslav Petkov]

Gif representing the issue

[Radoslav Petkov]

Another gif representing the same issue

[Radoslav Petkov]

I think this happens because i am using id as selector and when i insert multiple widgets there are elements in the dom with same ids which is contradicting with the definition of id : 'You can only use an ID name once in any XHTML or HTML document.' Am i right?

[Jakub Ś]

I have recreated (sort of) this widget. @rpet please review it and tell me if this is what you use?

---

I think this ticket is valid after all.

I don't think it is good approach to use ids as in such case thus I have changed it to class. (moved id to class and changed the selector (from # to .))

I have then tried moving around the widget until I do to situation shown on overlapping_handles.png. Once you try moving widget from there you are getting JS error thrown.

[Radoslav Petkov]

Yup thats it, but actually yours is getting this error thrown faster than my previous version.However i have fixed it by using classnames as selectors.

[Jakub Ś]

@rpet are you able to get scenario where you have overlapping drag handles with your plugin? Are you getting any error then?

I have attached mywidget2 plugin where ids were changed to classes however I'm still getting the error with above scenario. Are there any core differences between your and my sample plugin?

[Radoslav Petkov]

Strangely but, yes I broke yours then I broke mine the same way.The bug stays.However, I broke it only with this error first: Uncaught TypeError: Cannot read property 'blur' of null.And the widget fields stays focused.Then when i select another field it throws :

'Uncaught TypeError: Cannot read property 'filter' of undefinedm @ plugin.js?     t=F3LC:244(anonymous function) @ plugin.js?t=F3LC:380h @  ckeditor.js:10CKEDITOR.event.CKEDITOR.event.fire @ ckeditor.js:11CKEDITOR.editor.CKEDITOR.editor.fire @ ckeditor.js:13a @ ckeditor.js:370(anonymous function) @ ckeditor.js:25
plugin.js?t=F3LC:245 Uncaught TypeError: Cannot read property 'removeClass' of undefined'

[Szymon Cofalik]

Probably will be fixed by #13334 . Will check it after reviewing #13334.

[Szymon Cofalik]

Fixed by #13128

[Szymon Cofalik]

Error discussed in comment:2 and further will be fixed in #13397.