Entering unmatched text collapses the control.

[mendeza]

[mtkopone]

I'm sorry, but I'm going to need some more info to know what this is about?

[mtkopone]

This might be a browser issue? Which one we're you using?

Here's chrome:

[ErtugKaya]

Just press enter after that. It collapses for me too. Using latest Chrome.

Edit: It collapses because text inside div is gone.

[brianmhunt]

I can confirm that this behaviour occurs on Chrome on Mac, Chrome on iOS, and Safari on iOS.

[brianmhunt]

A selection of the trace of the issue when it exhibits is as follows:

• Line 54 - listNavigator.current() returns []
• Line 290 - $list.find(".current") returns []
• Line 54 - listNavigator.curent().data('.zelect-item') returns undefined
• Line 84 - selectItem(undefined, undefined)
• Line 129 - content is ""; The call $obj.text('')

It seems that the issue is the div collapsing because the text is set to empty ('').

There are three apparent workarounds: 1. putting a   in the div whenever the content is blank, or 2. manually setting the height, or 3. adding a character in a <span> whose visibility is hidden to the div.

An example of fix 1 (probably the easiest) would be changing renderContext to:

$obj[htmlOrText(content)](content === '' ? " " : content);
return $obj;
function htmlOrText(x) {
      return (x instanceof jQuery || x.nodeType != null || x === '')
              ? 'html' : 'text'
}

This ensures that $obj.html(" ") is called when the content is the empty string.

There may be other and better workarounds, but this'll probably do the trick.

[mtkopone]

This should be fixed in 0.0.8.

Pressing enter really shouldn't have "made a selection" when there is no selection to be made... So I fixed this by doing nothing when listNavigator.current() doesn't hit anything...