[toast] using $.toast() instead of $('body').toast() results in infinite JS setTimeout loop #3421
Description
Bug Report
The call on this line within the toast implementation, if called as $.toast(), leads to an infinite loop of setTimeout invocations within jQuery code, as the this passed here is apparently detected as a function and therefore jQuery treats it like a $(document).ready() call. The toast still shows up, so initially the bug is invisible, only to be seen in increased CPU load especially when creating many toasts while the page is open.
Calling $('body').toast() works as expected without side effects.
Steps to reproduce
- Include jQuery and fomantic-ui JS in a page.
- Call
$.toast()as directed on https://fomantic-ui.com/modules/toast.html - Observe increased CPU load of browser process. In the web developer tools, clicking the JS debugger "break" button will immediately break on some code in jQuery, the stack trace shows a large amount of setTimeout executions on the call stack.
This can be observed in the minimal test case provided below, but also on the offical docs page (https://fomantic-ui.com/modules/toast.html).
Expected result
Toast pops up.
Actual result
Toast pops up and an infinite JS setTimeout loop runs in the background.
Testcase
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
</head>
<body>
<button onclick="$.toast({message: 'Bug triggered'})">Click me</button>
</body>
</html>Screenshots
From debugger:
Version
fomantic-ui: 2.9.4
jquery: 3.7.1