Select2: Default is not selected properly for AJAX case

[dereuromark]

The default select2 works, and also select2 with ajax and some custom formatting works fine.
But once you combine them in an edit view (or after form submission), the selected value still selected in DOM is not put back into the select2 display field.
This should not be the case as it makes those actions not work with this element.

    $(document).ready(function() {
        $('.user-select-admin').select2({
            ajax: {
                url: '<?php echo $this->Url->build(['plugin' => false, 'prefix' => 'admin', 'controller' => 'Members', 'action' => 'search', '_ext' => 'json']); ?>',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    var queryParameters = {
                        q: params.term
                    };

                    return queryParameters;
                },
                processResults: function (data, params) {
                    return {
                        results: data.users
                    }
                }
            },
            placeholder: "<?php echo __('Select a user'); ?>",
            minimumInputLength: 2,
            templateResult: userFormatResult,
            templateSelection: userFormatSelection,
        });

    });

    function userFormatResult(user) {
        markup += "" + user.username + "";
        if (user.gender == 1 || user.gender == 2) {
            markup += ' (' + (user.gender == 2 ? 'F' : 'M') + ')';
        }

        return markup;
    }

    function userFormatSelection(user) {
        return user.username;
    }

Once you searched it will select again as per normal AJAX handling.
But the default ("demo") is not selected, leaving an empty/blank field from the start (which is incorrect):

<select name="user_id" class="user-select-admin form-control" required="required" id="user-id">
    <option value=""> - [ bitte auswählen ] - </option>
    <option value="1e7fb971-2fd4-4b00-9988-7c29ac1f0dbe" selected="selected">demo</option>
</select>

This seems to be a bug in the init process of AJAX as select type.

[dereuromark]

Without select2:

Select2 added becomes:

(on page load)

[dereuromark]

So, it turns out that the user.text is the trick.
Maybe the docs should be a bit more clear on the necessity of this specific check.

        function userFormatResult(user) {
            if (user.loading) return user.text;
            markup = "" + user.username + "";
            if (user.gender == 1 || user.gender == 2) {
                markup += ' (' + (user.gender == 2 ? 'F' : 'M') + ')';
            }

            return markup;
        }

        function formatRepoSelection(user) {
            return user.username || user.text;
        }

For me, it felt like text property was also a field on the user, like username, gender and alike and does not magically represent the text from the select field.

[kevin-brown]

For me, it felt like text property was also a field on the user, like username, gender and alike and does not magically represent the text from the select field.

Good news, this is documented at the section about The Select2 data format.

---

This appears to be more of a usage question than a bug report or common feature request. As we continue to keep the Select2 issue tracker geared towards these two areas, bug reports and common feature requests, we are redirecting usage questions to other communities such as the mailing list, IRC, or Stack Overflow.