drupal 11 javascript error: cannot call methods on autocomplete prior to initialization; attempted to call method 'destroy'

Created on 14 June 2025, about 2 months ago

Problem/Motivation

Javascript error. It doesn't seem to prevent anything actually working, but causes mink unit tests to fail.

Steps to reproduce

  1. Install drupal 11
  2. composer require drupal/webform:"6.3.x-dev"
  3. Enable webform and webform ui
  4. Click on build for the stock contact webform
  5. Click the edit button for "your name"
  6. Click save (don't just close it)
  7. Open the browser console
  8. Click the edit button for "your email"
  9. Look in the browser console
  10. Uncaught Error: cannot call methods on autocomplete prior to initialization; attempted to call method 'destroy'
  11. It doesn't have to be the stock contact webform. It seems to be any two fields on any form.

Proposed resolution

Unknown

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

6.3

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @demeritcowboy
  • I can reproduce this following the steps.

  • 🇮🇳India kulpratap2002
    1. Investigated and confirmed the issue originates from jQuery UI 1.10+ strict method behavior.
    2. Searched Webform module and custom code for any direct autocomplete('destroy') usage.
    3. Verified no explicit destroy calls exist — deduced issue happens during Drupal.detachBehaviors().
    4. Added data('ui-autocomplete') checks before calling .autocomplete('destroy') in patched logic but it also didn’t work.
    5. Explored related Webform behaviors (webformElementStates, webform.form.js, clientside_validation) for improper destroy usage.
    6. Validated that validate().destroy() was also unsafe and fixed it using a data('validator') check but it also didn’t work.
  • Thanks for looking.

    If you mean this for item 3, in web/core/misc/autocomplete.js, then what it sounds like is it's removing the element, and then calling destroy on it? It sounds like it shouldn't try to destroy if it just removed it?

    detach(context, settings, trigger) {
          if (trigger === 'unload') {
            $(
              once.remove('autocomplete', 'input.form-autocomplete', context),
            ).autocomplete('destroy');
          }
        },
  • 🇬🇧United Kingdom Sophie.SK

    We saw this recently but it was combined with another error that prevented the second field from being saved at all:

    An AJAX HTTP error occurred.
    HTTP Result Code: 200
    Debugging information follows.
    Path: /admin/structure/webform/manage/sophie_s_test_webform?ajax_form=1&_wrapper_format=drupal_ajax
    StatusText: parsererror
    ResponseText: 
    Warning:  foreach() argument must be of type array|object, string given in /var/www/html/docroot/core/lib/Drupal/Component/Utility/NestedArray.php on line 330
    Warning:  foreach() argument must be of type array|object, string given in /var/www/html/docroot/core/lib/Drupal/Component/Utility/NestedArray.php on line 330
    

    Which we were able to resolve by applying the patch from 🐛 _wrapper_format=drupal_ajax is always added, instead of updated when the param is already available Active .

    The autocomplete message still occurs on our sites but we can at least add multiple fields in one pageload now.

  • 🇮🇳India kulpratap2002

    Unassigning this so everyone can follow up on this.

Production build 0.71.5 2024