Selectize.js: Persist option not working with maxItems = 1

[jaideepYes]

Hi,
I am trying to work on first Example in examples/basic.html
with following code.
HTML.

<select id="js-select" class="demo-default" placeholder="Select a facility...">   
        <option value="">Select a option...</option>
    <option value="4">Thomas Edison</option>
    <option value="1">Nikola</option>
    <option value="3">Nikola Tesla</option>
    <option value="5">Arnold Schwarzenegger</option>
</select>

JavaScript
$('#js-select').selectize({ persist: false, createOnBlur: true, create: true, maxItems: 1 });
I doesn't want user added custom entries in dropdown.
It only delete user generated Option on backspace key.
if user without pressing backspace key, directly select some other option from dropdown ,it does not delete corresponding user option.
Why this behaviour ?
Any Fixes ?
Thanks

[jaideepYes]

Well , I did something like this , to remove all user generated options if user select default options from list.

$('#js-select').selectize({
                    // Options
                    create: true,
                    // Allows the user to create a new items that aren't in the list of options.
                    persist:false,  
                    //If false, items created by the user will not show up as available options once they are unselected.
                    createOnBlur: true,
                    // If true, when user exits the field (clicks outside of input or presses ESC) new option is created and selected (if `create`-option is enabled).
                    copyClassesToDropdown: false,
                    //Copy the original input classes to the Dropdown element.
                    maxItems: 1,
                    // The max number of items the user can select.
                    selectOnTab: false,
                    // If true, the tab key will choose the currently selected item.
                    onChange: function(value){
                        if(value){
                        // On 'Change' all User generated Options can be removed.
                        var self = this;
                        if (!self.settings.persist && !self.userOptions.hasOwnProperty(value)) {
                            $.each(self.userOptions, function(i){
                                self.removeOption(i, true);
                            });
                        }
                        //console.log( 'Item is Changed!!! and value is ' +  value );
                        }}
                    });

Thanks

[joallard]

Can you indicate your example with clear steps to reproduce?

[jaideepYes]

@joallard , @brianreavis
I have made a complete movie out of it :)

I guess the problem is,
When user clicks on option in dropdown, without removing item from input,
removeItem function is not called , neither item_remove event is triggered.
This bug could only be caught on onChange method.

Another annoying bug is , selectize doesn't allow two options with same value in HTML, This behavior is allowed in HTML.

<option value="flower">Rose</option>
<option value="flower">Jasmine</option>

https://github.com/selectize/selectize.js/issues/597

Possibly reason could be , the way selectize create its data object. self.options
with

{  
"option value" :{
            text: "option text",
            value: "option value"
            } ,
"option value" :{
            text: "option text",
            value: "option value"
            } 

}

{  
flower :{
           $order:1,
            text: Rose,
            value: flower
            } ,
flower  :{
            $order:2,
            text: Jasmine,
            value: "flower
            } 

}

and object cannot have 2 keys with same name, so plugin fails here.
Author should have created this object differently.

Anyways great plugin, Thanks

[bhawnam193]

It helped me mate 👍

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.