search

sonata-project / SonataAdminBundle

The missing Symfony Admin Generator
https://docs.sonata-project.org/projects/SonataAdminBundle
MIT License
2.11k stars 1.26k forks source link

ModelAutocompleteType - Uncaught Error: Option 'ajax' is not allowed for Select2 when attached to a <select> element. #7754

Closed dcatz closed 2 years ago

dcatz commented 2 years ago

Environment

Ubuntu 18.04 $.fn.jquery '3.4.1' select2.js 3.5.4

Sonata packages

show

``` sonata-project/admin-bundle 4.8.1 4.8.1 The missing Symfony Admin Generator sonata-project/block-bundle 4.9.1 4.9.1 Symfony SonataBlockBundle sonata-project/cache 2.2.0 2.2.0 Cache library sonata-project/doctrine-extensions 1.16.0 1.16.0 Doctrine2 behavioral extensions sonata-project/doctrine-orm-admin-bundle 4.2.3 4.2.5 Integrate Doctrine ORM into the SonataAdminBundle sonata-project/exporter 2.11.0 2.11.0 Lightweight Exporter library sonata-project/form-extensions 1.13.0 1.13.0 Symfony form extensions sonata-project/media-bundle 4.0.0-alpha1 4.1.1 Symfony SonataMediaBundle sonata-project/translation-bundle 3.x-dev d3552d6 3.x-dev db905e8 SonataTranslationBundle sonata-project/twig-extensions 1.9.1 1.9.1 Sonata twig extensions sonata-project/user-bundle 5.x-dev 7218901 5.x-dev 6519007 Symfony SonataUserBundle ```

Symfony packages

show

``` symfony/amqp-messenger v5.4.3 v5.4.3 Symfony AMQP extension Messenger Bridge symfony/asset v5.4.3 v5.4.3 Manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript ... symfony/browser-kit v5.4.3 v5.4.3 Simulates the behavior of a web browser, allowing you to make requests, click on links a... symfony/cache v5.4.3 v5.4.3 Provides an extended PSR-6, PSR-16 (and tags) implementation symfony/cache-contracts v2.5.0 v2.5.0 Generic abstractions related to caching symfony/config v5.4.3 v5.4.3 Helps you find, load, combine, autofill and validate configuration values of any kind symfony/console v5.4.3 v5.4.3 Eases the creation of beautiful and testable command line interfaces symfony/debug-bundle v5.4.3 v5.4.3 Provides a tight integration of the Symfony VarDumper component and the ServerLogCommand... symfony/dependency-injection v5.4.3 v5.4.3 Allows you to standardize and centralize the way objects are constructed in your applica... symfony/deprecation-contracts v2.5.0 v2.5.0 A generic function and convention to trigger deprecation notices symfony/doctrine-bridge v5.4.3 v5.4.3 Provides integration for Doctrine with various Symfony components symfony/doctrine-messenger v5.4.3 v5.4.3 Symfony Doctrine Messenger Bridge symfony/dom-crawler v5.4.3 v5.4.3 Eases DOM navigation for HTML and XML documents symfony/dotenv v5.4.3 v5.4.3 Registers environment variables from a .env file symfony/error-handler v5.4.3 v5.4.3 Provides tools to manage errors and ease debugging PHP code symfony/event-dispatcher v5.4.3 v5.4.3 Provides tools that allow your application components to communicate with each other by ... symfony/event-dispatcher-contracts v2.5.0 v2.5.0 Generic abstractions related to dispatching event symfony/expression-language v5.4.3 v5.4.3 Provides an engine that can compile and evaluate expressions symfony/filesystem v5.4.3 v5.4.3 Provides basic utilities for the filesystem symfony/finder v5.4.3 v5.4.3 Finds files and directories via an intuitive fluent interface symfony/flex v1.18.4 v1.18.5 Composer plugin for Symfony symfony/form v5.4.3 v5.4.3 Allows to easily create, process and reuse HTML forms symfony/framework-bundle v5.4.4 v5.4.4 Provides a tight integration between Symfony components and the Symfony full-stack frame... symfony/google-mailer v5.4.3 v5.4.3 Symfony Google Mailer Bridge symfony/http-client v5.4.3 v5.4.3 Provides powerful methods to fetch HTTP resources synchronously or asynchronously symfony/http-client-contracts v2.5.0 v2.5.0 Generic abstractions related to HTTP clients symfony/http-foundation v5.4.3 v5.4.3 Defines an object-oriented layer for the HTTP specification symfony/http-kernel v5.4.4 v5.4.4 Provides a structured process for converting a Request into a Response symfony/intl v5.4.3 v5.4.3 Provides a PHP replacement layer for the C intl extension that includes additional data ... symfony/lock v5.4.3 v5.4.3 Creates and manages locks, a mechanism to provide exclusive access to a shared resource symfony/mailer v5.4.3 v5.4.3 Helps sending emails symfony/maker-bundle v1.36.4 v1.37.0 Symfony Maker helps you create empty commands, controllers, form classes, tests and more... symfony/messenger v5.4.3 v5.4.3 Helps applications send and receive messages to/from other applications or via message q... symfony/mime v5.4.3 v5.4.3 Allows manipulating MIME messages symfony/monolog-bridge v5.4.3 v5.4.3 Provides integration for Monolog with various Symfony components symfony/monolog-bundle v3.7.1 v3.7.1 Symfony MonologBundle symfony/options-resolver v5.4.3 v5.4.3 Provides an improved replacement for the array_replace PHP function symfony/orm-pack v2.2.0 v2.2.0 A pack for the Doctrine ORM symfony/password-hasher v5.4.3 v5.4.3 Provides password hashing utilities symfony/phpunit-bridge v6.0.3 v6.0.3 Provides utilities for PHPUnit, especially user deprecation notices management symfony/polyfill-intl-grapheme v1.24.0 v1.24.0 Symfony polyfill for intl's grapheme_* functions symfony/polyfill-intl-icu v1.24.0 v1.24.0 Symfony polyfill for intl's ICU-related data and classes symfony/polyfill-intl-idn v1.24.0 v1.24.0 Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions symfony/polyfill-intl-normalizer v1.24.0 v1.24.0 Symfony polyfill for intl's Normalizer class and related functions symfony/polyfill-mbstring v1.24.0 v1.24.0 Symfony polyfill for the Mbstring extension symfony/polyfill-php73 v1.24.0 v1.24.0 Symfony polyfill backporting some PHP 7.3+ features to lower PHP versions symfony/polyfill-php80 v1.24.0 v1.24.0 Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions symfony/polyfill-php81 v1.24.0 v1.24.0 Symfony polyfill backporting some PHP 8.1+ features to lower PHP versions symfony/polyfill-uuid v1.24.0 v1.24.0 Symfony polyfill for uuid functions symfony/process v5.4.3 v5.4.3 Executes commands in sub-processes symfony/property-access v5.4.3 v5.4.3 Provides functions to read and write from/to an object or array using a simple string no... symfony/property-info v5.4.3 v5.4.3 Extracts information about PHP class' properties using metadata of popular sources symfony/proxy-manager-bridge v5.4.3 v5.4.3 Provides integration for ProxyManager with various Symfony components symfony/psr-http-message-bridge v2.1.2 v2.1.2 PSR HTTP message bridge symfony/redis-messenger v5.4.3 v5.4.3 Symfony Redis extension Messenger Bridge symfony/routing v5.4.3 v5.4.3 Maps an HTTP request to a set of configuration variables symfony/runtime v5.4.3 v5.4.3 Enables decoupling PHP applications from global state symfony/security-acl v3.3.0 v3.3.1 Symfony Security Component - ACL (Access Control List) symfony/security-bundle v5.4.3 v5.4.3 Provides a tight integration of the Security component into the Symfony full-stack frame... symfony/security-core v5.4.3 v5.4.3 Symfony Security Component - Core Library symfony/security-csrf v5.4.3 v5.4.3 Symfony Security Component - CSRF Library symfony/security-guard v5.4.3 v5.4.3 Symfony Security Component - Guard symfony/security-http v5.4.3 v5.4.3 Symfony Security Component - HTTP Integration symfony/serializer v5.4.3 v5.4.3 Handles serializing and deserializing data structures, including object graphs, into arr... symfony/service-contracts v2.5.0 v2.5.0 Generic abstractions related to writing services symfony/stopwatch v5.4.3 v5.4.3 Provides a way to profile code symfony/string v5.4.3 v5.4.3 Provides an object-oriented API to strings and deals with bytes, UTF-8 code points and g... symfony/templating v5.4.3 v5.4.3 Provides all the tools needed to build any kind of template system symfony/translation v5.4.3 v5.4.3 Provides tools to internationalize your application symfony/translation-contracts v2.5.0 v2.5.0 Generic abstractions related to translation symfony/twig-bridge v5.4.3 v5.4.3 Provides integration for Twig with various Symfony components symfony/twig-bundle v5.4.3 v5.4.3 Provides a tight integration of Twig into the Symfony full-stack framework symfony/validator v5.4.3 v5.4.3 Provides tools to validate values symfony/var-dumper v5.4.3 v5.4.3 Provides mechanisms for walking through any arbitrary PHP variable symfony/var-exporter v5.4.3 v5.4.3 Allows exporting any serializable PHP data structure to plain PHP code symfony/web-profiler-bundle v5.4.3 v5.4.3 Provides a development tool that gives detailed information about the execution of any r... symfony/webpack-encore-bundle v1.14.0 v1.14.0 Integration with your Symfony app & Webpack Encore! symfony/yaml v5.4.3 v5.4.3 Loads and dumps YAML files ```

PHP version

PHP 7.4.27 (cli) (built: Dec 20 2021 21:27:56) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.27, Copyright (c), by Zend Technologies

Subject

A JavaScript exception is thrown when rendering an Admin page containing a ModelAutocompleteType, making the component not to render.

Minimal repository with the bug

$form->add('features', ModelAutocompleteType::class, [
  'property' => 'name',
  'multiple' => true,
]);

Steps to reproduce

Render the Admin page.

Expected results

No JavaScripts errors and field rendered correctly.

Actual results

JavaScript error:

1.af27a8b8.js:73 Uncaught Error: Option 'ajax' is not allowed for Select2 when attached to a <select> element.
    at String.<anonymous> (select2.min.js:21:22620)
    at Function.each (1.af27a8b8.js:62:2743)
    at d.prepareOpts (select2.min.js:21:22501)
    at d.prepareOpts (select2.min.js:22:21583)
    at d.init (select2.min.js:21:17961)
    at HTMLSelectElement.<anonymous> (select2.min.js:23:2472)
    at Function.each (1.af27a8b8.js:62:2743)
    at EVdn.b.fn.init.each (1.af27a8b8.js:62:1384)
    at EVdn.b.fn.init.a.fn.select2 (select2.min.js:23:2160)
    at HTMLDocument.<anonymous> (edit:1916:31)

and the component is rendered like this:

Selection_999(2666)

instead of

Selection_999(2667)

The error links to this line:

https://github.com/sonata-project/SonataAdminBundle/blob/4.x/src/Resources/views/Form/Type/sonata_type_model_autocomplete.html.twig#L161

Thanks for the help. Daniel

VincentLanglet commented 2 years ago

Ubuntu 18.04 $.fn.jquery '3.4.1' select2.js 3.5.4

First, I would say it's weird/not recommended to have select2 v3, when we use the v4 in sonata https://github.com/sonata-project/SonataAdminBundle/blob/4.x/package.json#L16 Same for jquery, we're currently using the v2... https://github.com/sonata-project/SonataAdminBundle/blob/4.x/package.json#L8

dcatz commented 2 years ago

Hi @VincentLanglet,

Thanks for your quick reply.

You are right, I am using jQuery v3 as I require it for several other JS assets dependencies. So far JQuery v3 seems to be working correctly.

When starting using select2 4.0.13, the ModelAutocompleteType was giving me another JS error:

Uncaught Error: No select2/compat/dropdownCss

But researching a bit I found out that select2.full.js was required, so when using this instead of the default select2.js works perfectly.

Thanks again for your support. Regards, Daniel