Support to Select2 Option selectionCssClass

[rgaiacs]

The documentation says

Select2 options can be configured either directly from Javascript or from within Django using widget attributes. (List of options in the Select2 docs).

I want to use the Select 2 option selectionCssClass. The code that I have is

class MultipleChoiceQuestionForm(forms.ModelForm):
    class Meta:
        model = MultipleChoiceQuestion
        fields = ("question_text", "possible_answers")
        widgets = {
            "possible_answers": s2forms.Select2Widget(
                attrs={
                    "data-width": "100%",
                    "data-selectionCssClass": "gs-input",
                }
            ),
        }

and it creates the following HTML

<span
    class="select2 select2-container select2-container--default"
    dir="ltr"
    data-select2-id="1"
    style="width: 100%;"
>
    <span class="selection">
        <span
            class="select2-selection select2-selection--single"
            role="combobox"
            aria-haspopup="true"
            aria-expanded="false"
            tabindex="0"
            aria-disabled="false"
            aria-labelledby="select2-id_possible_answers-container"
        >
            <span
                class="select2-selection__rendered"
                id="select2-id_possible_answers-container"
                role="textbox"
                aria-readonly="true"
                title="---------"
            >---------</span>
            <span
                class="select2-selection__arrow"
                role="presentation"
            ><b role="presentation"></b></span>
        </span>
    </span>
    <span
        class="dropdown-wrapper"
        aria-hidden="true"
    ></span>
</span>

The CSS class that I provided, gs-input, is not present in the HTML. What am I missing?

[codingjoe]

Hi there 👋,

Thanks for reaching out. This change doesn't require a data-attribute. You just need to set class.
So, following your example:

class MultipleChoiceQuestionForm(forms.ModelForm):
    class Meta:
        model = MultipleChoiceQuestion
        fields = ("question_text", "possible_answers")
        widgets = {
            "possible_answers": s2forms.Select2Widget(
                attrs={
                    "data-width": "100%",
                    "class": "gs-input",
                }
            ),
        }

I hope my answer is useful. Don't hesitate to ask more questions.

Best
Joe