Value of select reset when another field is modified

Question

I'm having a problem with my selects in my editable table. Below is the step-by-step behavior: Example: I have a select with two options: Option1 and Option2.

1/ I modify the value of my select => ex: "Option2". the persist in db and display are ok.

2/ I modify the value of another field in the editable line (input or select).

3/ The previous modified select changes value automatically and saves the first value of the select =>" Option 1". This change is also made in the database.

According to the doc ( https://editor.datatables.net/examples/inline-editing/join.html), the problem is linked to the join of my selects. You need to add the editField field so that the Datatable object understands that there is a join.

Please note that I'm working with Symfony4 + JS. Here are my attempts in PHP :

As specified in the documentation, I need to refer to the join. In my case "establishment" in a getColumns function that lets me define all the columns in my datatable

[
            'data' => 'establishment',
            'type' => 'select',
            'editField' => 'establishment',
            'class'  => 'editable select2ParamUser ellipsis-td',
            'searchable' => true,
            'jsonPathName' => $this->generateUrl('user_ajax_select', ['select' => 'establishment']),
 ],

I have no console errors, but my bug is still present.I've tried things on the Javascript side too (editField and editFields). No error again, but nothing changes...

editor.on('submitComplete', function (e) {
                e.preventDefault();
                $(dataTableTempId).on('click', 'tbody .editable', function () {
                    var field = $(this).data('field')
                    initializeEditableRow(this, field);
                });
            });
         
            var editFields = {
                'establishment': 'e.id',
                'gender': 'g.id',
                'society': 'so.id'
            };

            function initializeEditableRow(row, field) {
                console.log($('.datatables').DataTable().row(row).data());
                editor.inline(row, {
                    onBlur: 'submit',
                    submit: 'allIfChanged',
                    data: '',
                    editFields: editFields[field],
                });

                //We load select2
                $(row).find('select').each(function() {
                    $(this).select2();
                    $(this).closest('td').removeClass('ellipsis-td');

                    $(row).find('select').on('select2:close', function() {
                        $(this).closest('td').addClass('ellipsis-td');
                    });
                });

                // If I open a new field before submitting the previous one, I get an 'editRow is undefined' error and I can't edit the field.
                // When an .editable element is clicked, (initializeEditableRow(this)) is activated.
                // Then, the .off is used to deactivate this event handler so that no event is added for each click.
                $(dataTableTempId).off('click', 'tbody .editable');
             }

It's a complex behavior to explain... Don't hesitate to ask me questions if you need to understand the problem further. Thank you very much for your help!