Problem with select2 JS library field dependency

[manaka02]

Hello,
I actually trying to implement this in multiple of my forms. It works perfectly except when the field dependency use package select2 ( js rendering).

If there is possible solution.

Thank you very much for your work.

[bocharsky-bw]

Hey @manaka02 ,

Unfortunately, I haven't tried it with select2 myself, but if you will describe your problem in more details - maybe someone will give you some hints. What exactly does not work for you with select2 js rendering?

[iruoy]

I have the same problem (probably). On pageload a javascript function looks for some class and converts all those inputs to select2 inputs. However when the HTML is replaced that function should run again. I couldn't find an easy event to listen for.

There's also the issue that select2 changes aren't registered by this package.

[KamikX]

I have the same problem (probably). On pageload a javascript function looks for some class and converts all those inputs to select2 inputs. However when the HTML is replaced that function should run again. I couldn't find an easy event to listen for.

There's also the issue that select2 changes aren't registered by this package.

Custom stimulus controller with select2 solve this problems automatically, personally I use combo UX Turbo ( Turbo Frames => submit via POST) + Dynamic Forms (conditional fields) + Custom Stimulus (bind select2 JS to specific fields)

[bocharsky-bw]

@KamikX thanks for sharing your solution with others! Yeah, Stimulus controller for it may help.

Seems the original issue here relates to the way the third-party lib (Select2 in this case) is instantiated, i.e. I suppose it's instantiated only on the page load and so you either need to find an official way to instantiate that library when new fields pop up into your HTML, or use a custom workaround with Stimulus controller like @KamikX mentioned. In any way, I don't think this is related to the symfonycasts/dynamic-forms package directly, mostly related upstream so I think we can close this issue now.

The only thing we can help with here - probably mention this workaround somewhere in the docs, e.g. something like "if you're using Select2 (or other lib) that is instantiated on the page load - you may need to wrap it in a Stimulus controller to make it work when new fields dynamically pop up into your HTML...". @KamikX do you want to create a PR and mention an example of your Stimulus controller for Select2 in the docs?

[WoutervanderLoopNL]

Ive a custom Stimulus controller. and changes to the select2 field triggers a rerender.

however it depents on having window.jQuery set. cant find another way to listen to the select2 events

component.html.twig

<div {{ attributes.defaults(stimulus_controller('form_with_select2', {})) }}>
..your form
</div>

form_with_select2_controller.js

'use strict';

import { Controller } from '@hotwired/stimulus';
import { getComponent } from '@symfony/ux-live-component';

export default class extends Controller {
    async initialize() {
        this.component = await getComponent(this.element);
    }

    connect() {
        this.element.addEventListener('live:connect', (event) => {
            this.liveController = event.detail.controller;
        });

        const elements = document.querySelectorAll("select[data-toggle=\"choice\"]");

        elements.forEach(
            (element) => {
                window.jQuery(element).on(
                    'select2:select',
                    (e) => {
                        this.liveController.updateModelFromElementEvent(element, 'change');
                    }
                )
            }
        )
    }
}

[bocharsky-bw]

There's a code snippet example kindly shared by our users to solve this problem (big thanks to
@KamikX ): #42

It should help with this issue. I'm closing it now as it's out of scope for this bundle, mostly depends on how the third-party lib (Select2) works. Feel free to share such examples that might be useful for users here in this issue, but also Stackoverflow might be a good place for this.