Selectize.js: First character remains highlighted

[Wardrop]

If you type something into a selectize field, and then backspace it, the highlighting for the first letter remains until you type something else. This issue applies to the current master branch.

This was originally mentioned in the comments of the related issue #1098.

Please let me know if any more information is required. Reproducing the issue should be simple enough.

[joallard]

STR as reported

1. you type something into a selectize field,
2. and then backspace it,

Actual: the highlighting for the first letter remains until you type something else

Expected: Highlighting disappears

[guoyunhe]

Same problem with new findings:

If type "n" and backspace, then type "e" and backspace. Sometimes the n and e are highlighted. Because removed (or hidden?) items/options won't be remove highlighting.

[Darep]

ginlime's patch at https://github.com/selectize/selectize.js/pull/1169 fixed this for us 👍

[coudrak]

The patch does not fix this problem, it always stays the first character highlighted in the suggestions when you delete the entry.

[i-void]

You can see the problem still here on the site demos also.

[greg-man]

Can confirm that this bug is still present. You can fix it manually with the onChange or onItemAdd setting. Code sample:

$(yourSelector).selectize({
...
onChange: function(){ this.$dropdown_content.removeHighlight(); },
...
});

Regards
Greg

[coudrak]

@greg-man This doesn't fix during the user stays focused in the field and deletes the input with backspace (or the mouse), it works only after you select an item.

[greg-man]

You're right, I missed that. How about adding

onType: function(str) { str || this.$dropdown_content.removeHighlight(); }

then?

Regards
Greg

[coudrak]

Yes it works, thanks.
So, needs onType + onChange.

[Pictor13]

Does it need to be fixed? I can't reproduce the problem in the demo/examples page; seems to work fine for me.

What do you do so that the issue appears?

[greg-man]

You can reproduce it at https://selectize.github.io/selectize.js/. Type "Nik" into the Email Contacts input field. "Nik" gets highlighted. Now use the backspace to fully remove "Nik". Although the input is fully removed "N" remains highlighted.

EDIT: same issue when selecting an item after typing "Nik". on next dropdown "N" is still highlighted.

Tested with Firefox 56 and Chrome 61 on Ubuntu 16.04

[Pictor13]

Oh, I see. Yes, bug is still there.
As mentioned by @Darep, the patch (provided by @ginlime) was there; but the pull-request (#1169) has been closed without merging.
Not sure about the reason for that..

[mlew980]

I have managed to track down the issue to line 2246, more specifically this part:

if (self.settings.highlight && results.query.length && results.tokens.length) {

It doesn't highlight if the query and tokens length is equal to 0.

I fixed it by putting the following:

// if input is empty then remove highlight
if (self.settings.highlight && results.query.length == 0 && results.tokens.length == 0)
{
    $dropdown_content.removeHighlight();
    if (self.hasOptions) {
        if (results.items.length > 0) {
            self.setActiveOption(self.getOption(results.items[0].id));
        }
    }
}

You need to put it below the following activate method:

// activate
self.hasOptions = results.items.length > 0 || has_create_option;
if (self.hasOptions) {
    if (results.items.length > 0) {
        $active_before = active_before && self.getOption(active_before);
        if ($active_before && $active_before.length) {
            $active = $active_before;
        } else if (self.settings.mode === 'single' && self.items.length) {
            $active = self.getOption(self.items[0]);
        }
        if (!$active || !$active.length) {
            if ($create && !self.settings.addPrecedence) {
                $active = self.getAdjacentOption($create, 1);
            } else {
                $active = $dropdown_content.find('[data-selectable]:first');
            }
        }
    } else {
        $active = $create;
    }
    self.setActiveOption($active);
    if (triggerDropdown && !self.isOpen) { self.open(); }
} else {
    self.setActiveOption(null);
    if (triggerDropdown && self.isOpen) { self.close(); }
}           

[mcavalletto]

It looks like this was fixed in 8da5b51ffb4bea4482206c8d6625d21cde3a58f0.

[mlew980]

Weird, I pulled the latest revision via NPM yesterday and it was occurring on there.
I've tested it on JSFiddle and it's still occurring: https://jsfiddle.net/df1Loutr/4/
Type in Bri into the input field then delete it all and the letter B is still highlighted.

[mcavalletto]

That JSfiddle is testing against 0.12.4 — does the problem still happen with a clean build against the current master branch?

(Unfortunately, that code is unreleased and requires a git checkout / grunt build, so it is not very convenient to test.)

[mlew980]

Good spotting, didn't realise the dist version was out of date. Managed to pull the branch and build without a hitch (with the bug fixed). Thank you. :)

[Pictor13]

Yes, the current latest version is stuck to 2 years ago. Pull requests are merged sometimes but nobody took care of releasing a new version yet (and some stuff/commits/merges still need to be tested and reviewed properly before proceeding with at 0.12.5 🙁).

[joallard]

Thanks for your patience with the releases. I'd be inclined to make a new release (#1410) after the current build is fixed (#1409). Such a PR would be welcome.