How to prevent alpaca from generating radio field when the search select has 3 or less options

Question

I have a div and a following javascript:

let usersNotContributingIds = [ 19, 20, 21 ];
let usersNotContributingNames = [ "Flavius K.", "Pogchamp", "Lazy Gopnik" ];
let contributorToBeAddedId; // the value that will be used for further actions
$("#alpaca-search-contributing-users").alpaca({
            data: null,
            schema: {
                type: "object",
                enum: usersNotContributingIds,
            },
            options: {
                name: "pls",
                label: 'Contributor Fullname',
                optionLabels: usersNotContributingNames,
                helper: "Select user sou want to add as a contributor",
                id: "select2-search",
                focus: false,
                events: {
                    change: function() {
                        console.log(this.getValue().value);
                        contributorToBeAddedId = this.getValue().value
                    },
                    focus: function() {
                        console.log(this.name);
                    },
                    blur: function() {
                        console.log(this.name + ": blur");
                    },
                    ready: function() {
                        console.log(this.name);
                    }
                },

            },

            postRender: function(control) {
                $('#select2-search').select2();
            }
        });

Obviously, I want to get the newly set value, or anyhow access the selected value and use it. For example with AJAX and a button. The problem is, that when I have 3 or less options, Alpaca render the field not as a search, but as a radio-something and the this.getValue() is null.

Is there a way to force Alpaca to NOT USE THE RADIO BUTTONS? I dont want to use them, even if I had only 1 option. Documentation just promtly states, that if there are 3 or less options, it will generate radio buttons instead of select, but it says nothing about the fact, that it breaks everything and that I would not be able to retrieve the value the same way as with select field.

If I am doing something inefficiently or wrong, please tell me, I am new with Alpaca and I just want a neat select dropdown with search, that I can use to pick users from a list with any length. Also, I would like the "null" or "none" option to not be there.

Answer 1

To have your select component rendered you should use the option type and set it to "select".

The issue with the value is because you're using it wrong, to get the value in alpaca you only do this.getValue() and there's no need to add .value.

FYI: If you see the error "This field should have one of the values in Flavius K., Lazy Gopnik, Pogchamp. Current value is: 19" you should update your enum array to have strings instead of ints let usersNotContributingIds = [ "19", "20", "21" ];.

Here's a working fiddle for this.