Fomantic-ui: [dropdown] jQuery 3.4.1 Maximum call stack size exceeded when calling '.dropdown(' before '.form('

[ebreaur]

https://jsfiddle.net/hw2dyLur/
It does work with the previous jQuery 3.3.1 . Is Fomantic not compatible yet with 3.4.1?

jquery.min.js?v=1581085047540:2 Uncaught RangeError: Maximum call stack size exceeded
at String.replace ()
at V (jquery.min.js?v=1581085047540:2)
at Y.get (jquery.min.js?v=1581085047540:2)
at Object.trigger (jquery.min.js?v=1581085047540:2)
at k.fn.init.triggerHandler (jquery.min.js?v=1581085047540:2)

Seems like the blur event on a form field triggers a blur handler that triggers the blur again so it spins like this until it reaches the call stack limit.

[lubber-de]

The documentReady system seems to have changed in jquery 3.4.x , so jquery is not available if you are instantly trying to instantiate any module.
If you wrap your js code into the jquery documentready function, it works with 3.4.x as well

$(function() {

  // your code
  $('.ui.dropdown').dropdown();

});

See https://jsfiddle.net/8wnch27g/

[ebreaur]

thank you @lubber-de

[ebreaur]

https://jsfiddle.net/qanmrz28/
The call stack exceeded was because the order of calling .form and .dropdown. In the example above if you call .form( before .dropdown( there will be no stack exception.

[neokio]

@ebreaur I spent days trying to figure out the cause of the Uncaught RangeError until you pointed this out. Thanks!

[ebreaur]

This is because the dropdown is a 'search' dropdown and when you initialize such dropdown a hidden input is inserted
if( module.is.search() && !module.has.search() ) { module.verbose('Adding search input');

Then when you call .form( to add validations the form is scanned for fields that now will also contain this 'search input' and a blur listener will be added on that search input as well.
$field.on('change click keyup keydown blur'

It seems that Fomantic is not expecting that search input to be part of '$field'

I am reopening this. Even if the order would fix it, in case of wrong order there should be a clear error message.

[neokio]

It seems lots of subtle problems happen with any order of search dropdown() and form(). In the below example, when I click ADD in the page below, the "Editor Name" dropdown is filled dynamically, and then a modal window opens showing the following form.

The form below has validations fields. Everything works fine as long as no validation fails. I can select a value and submit it without error. BUT if I leave "Rank" empty, it correctly shows the warning message (as in the screenshot), and If I then use the dropdown, it causes the "Maximum call stack size exceeded" error.

Here's the page and error ...

Here's the code (add_modal_prep simply populates the dropdown) ...

[lubber-de]

I am already trying to figure out what jquery 3.4 changed in comparison to 3.3.1 so this behavior occurs..

[coder8keyboard]

In my case, I had to to call .form() before .dropdown() to make it work.

[lubber-de]

Fixed by #1661
See your adjusted jsfiddle here https://jsfiddle.net/lubber/0avf64sj/11/