allowMismatch does not work as expected

[eavdmeer]

Consider the following example:

<select id="myflex" class="flexselect">
  <option value="george">George Washington</option>
  <option value="john">John Adams</option>
  <option value="thomas">Thomas Jefferson</option>
</select>
<input type="button" id="test" value="Test" />

This select is then allowed to mismatch:

$("select.flexselect").flexselect({ allowMismatch: true });
$('#test').click(function() { alert($('#myflex').val(); });

The problem occurs when the following steps are followed:

1. Start typing 'John' in the input box. That shows the 'John Adams' option. Select that.
2. Click the Test button. The alert box will show 'john'.
3. Click the input box again and clear it. Now type 'hello' in the input box.
4. Click the Test button again. Because we now input a custom value, I expect val() to return null (preferably I would like to see 'hello', but I know that's not how it works). Instead, it shows 'john' again.

The selected value basically becomes invalid as soon as you start typing in the input box. That means it should be cleared. That is very easy to achieve:

@@ -153,6 +153,8 @@
       });
 
       this.input.keyup(function(event) {
+        self.select.val('');
+
         switch (event.keyCode) {
           case 13: // return
             event.preventDefault();