Bad interactions with other technologies

Learn
1

I have a small widget implemented in Elm. The code for this widget is loaded on other websites.

One of the websites is breaking the widget. The traceback points to some code in the website’s uikit library (UIkit version 2.20.3) trying to use trigger. I guess that the library assumes that the click source is a jQuery element that has trigger. This seams to be related to some touch optimization for the mobile version.

Any idea what to do about this kind of errors? There is already a stopPropagationOn "click" event handler.

Later Edit: I have tried locating that old version of UIKit and creating a contained example with only the library and the widget but the bug does not show (Widget behaves as expected).

1 Like
2

What does “breaking the widget” mean? Red errors in the JS console? Clicking things does nothing? Broken styling?

3

There is a red error in the js console and after that one of the button stops working and triggers the error each time it is clicked. The logic behind the button (some state toggle) is not triggered.

There is no other error other than:
uikit-6d93b8f4.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'trigger') at uikit-6d93b8f4.js:2

4

That kind of interaction can be difficult to debug. A few things come to mind though, maybe one of them will help

Is your widget being rendered inside a form element? If so, your button could be triggering a submit event that UIKit could be trying to take action on and interact with the button, leading to the error. A fix might be to make sure the button has a type="button" attribute.

Maybe UIKit is doing something with the click event during the capture phase? That could also be a way it takes action on a click even though you have stopPropagation on your handler.

If you don’t have to target older browsers it might be worth trying to put your widget in the shadow DOM of a custom element. I don’t recall all the rules off of the top of my head, but I know there are at least a few basic hurdles to external JS interacting with elements in shadow DOM. That might be enough to stop UIKit from doing whatever it’s doing, without having to get into debugging the specifics of the interaction.

5

Have you tried to wrap your widget inside a closed ShadowRoot ?

let shadow = myElement.attachShadow({ mode: 'closed' });

It won’t hide from browsers’ plugins, but should from local DOM querying.

6

Yes. This kind of approach has been part of the defensive programming we did a long time ago.

This whole topic is a shot in the dark due to the atypical nature of the interaction (widget on old websites) but my hope is that maybe someone has seen these kind of errors.

Between MooTools, jQuery, UIKit and RokBox Joomla extension, it proved very difficult to reproduce the error on my dev machine.

7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.