TributeJS throwing e.focus error - called within Froala element

62 Views Asked by At

I have a Froala element, which I am hoping to build a tagging element into using TributeJS.

I have a global version of the Froala element stored under instance.data.editor.

I am initialising tribute using the 'Froala Initialized' method as follows:

            'initialized': function() {

                if (instance.data.logging) console.log("<Event> initialized\n");

                if (properties.tribute_on) {
                    // Initialize tribute.js with a list of users
                    tribute = new Tribute({
                        trigger: '@',
                        values: [
                            { key: "Phil Heartman", value: "pheartman" },
                            { key: "Gordon Ramsey", value: "gramsey" }
                        ]
                    });

                    // Attach tribute to Froala element.
                    tribute.attach(instance.data.editor.el);
                }

I then call the following code:

                'keydown': function(event) {
                if (instance.data.logging) console.log("<Event> keydown");

                if (properties.tribute_on) {

                    if (event.which === 50 && event.shiftKey) { // 50 is the keycode for '@'
                        tribute.showMenuForCollection({
                            values: tribute.collection,
                            lookup: function (item) {
                                return item.key.indexOf(this.trigger) === 0;
                            },
                            selectTemplate: function (item) {
                                return '@' + item.original.value;
                            },
                            menuItemTemplate: function (item) {
                                return item.string;
                            },
                            noMatchTemplate: function () {
                                return '<li class="tribute-no-match">No match found!</li>';
                            },
                            trigger: '@',
                            requireLeadingSpace: true,
                            allowSpaces: true,
                            positionMenu: function (menu, trigger) {
                                var rect = trigger.getBoundingClientRect();
                                menu.style.left = rect.left + 'px';
                                menu.style.top = rect.bottom + 'px';
                                menu.style.width = '300px'; // set the width of the dropdown menu
                                return menu;
                            },
                            onSelect: function (item) {
                                instance.data.editor.html.insert('@' + item.original.value + '&nbsp;');
                                setTimeout(function() {
                                    instance.data.editor.events.focus();
                                }, 0);
                            }
                        });

                        e.preventDefault();
                    }

                }

This all looks to be working, apart form the fact that we are thrown the following error:

e.focus is not a function

Each time I start my search by typing '@'.

Any ideas how to solve this? Thank you in advance!

0

There are 0 best solutions below