Is it possible to prevent Selectize from converting to dropdown when Maxitem = 1?

Question

I am using Selectize to create dropdowns and text inputs for an internal website. My problem is that whenever maxItems is set to 1, Selectize automatically turns the field into a drop down. I want it to have the textarea look, and tag the new item. But I don't want it to allow users to create more than one value. Code Examples Below.

Code Sample 1:

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        delimiter: ',',
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 2,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>

This code will create the desired effect, but allows up to two items. Since the quantity field should only allow one value, I want to prevent users from trying to send two+ values. This code generates the desired look, but undesired functionality.

Code Sample 2

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        delimiter: ',',
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 1,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>

This will prevent users from trying to send more than one value, but gives the input box a dropdown look and feel. This code generates the desired functionality, but undesired look.

I have checked the Selectize documentation, but have not found any way to override this behavior.

Make the following changes to Selectize.js to allow for the desired behavior.

// This line is original to Selectize.js.
self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi');
// Add the following code beneath it.
if(self.settings.singleOverride === true){
    self.settings.mode = 'multi';
}

Now, if you add "singleOverride: true," to your selectize definition, it will allow maxItems to be set to 1, but Selectize will still behave in the textinput/tagging way. Example below:

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 1,
        tagType: "TAG_SELECT",
        singleOverride: true,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>

Credit goes to Mike McCaughan for pointing me in the right direction.

Answer 1

Make the following changes to Selectize.js to allow for the desired behavior.

// This line is original to Selectize.js.
self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi');
// Add the following code beneath it.
if(self.settings.singleOverride === true){
    self.settings.mode = 'multi';
}

Now, if you add "singleOverride: true," to your selectize definition, it will allow maxItems to be set to 1, but Selectize will still behave in the textinput/tagging way. Example below:

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 1,
        tagType: "TAG_SELECT",
        singleOverride: true,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>

Credit goes to Mike McCaughan for pointing me in the right direction.

Answer 2

There really isn't a way of doing what you're looking for, with the code as-is. Here is the offending code in selectize.js:

if ((settings.maxItems === null || settings.maxItems > 1) && self.tagType === TAG_SELECT) {
    $input.attr('multiple', 'multiple');
}

Apparently, they do have a plugin architecture which could override that code, but building the plugin would be beyond the scope of this question.

You could also create a fork for their repo: https://github.com/selectize/selectize.js and update that code, or just update a local copy.

Answer 3

I have encountered the same problem, but I didn't like the idea of changing the source coude of Selectize. Thanks to my colleague's advice I might have found a better solution.

Simply setting the mode: 'multi' instead of singleOverride: true in the implementation seems to do the trick.

In your case the code would look like this:

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 1,
        tagType: "TAG_SELECT",
        mode: 'multi',
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>