Description
If I click on the dropdown's arrow, get the full option list and click on one of them, I get one change event, the event target (select element) having the correct selected value property.
However, if I write a few characters, get the filtered option list and click on one of them, I get two change events, the event target (select element) having an incorrect empty value property in the first event, and the correct selected value only in the second event. (The same happens if I edit an option already selected previously.)
Obviously, if one is listening to the events, this unexpected behaviour may lead to a wrong result. (For example, I'm removing the combo-box if the user has cleared the value, which – it turns out – they may not have actually done.)
Combobox version 1.2.0.
Bootrstrap version 4.2.1.
A source example. Open the page, write 'a' in the combobox and click on one of the options. See the console log.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap-combobox.css" />
</head>
<body>
<form>
<fieldset>
<label>Opti:
<select name="opti" class="form-control">
<option value="">- None -</option>
<option value="1">Aba2</option>
<option value="2">Aba</option>
<option value="3">Bab</option>
</select>
</label>
</fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="bootstrap-combobox.js"></script>
<script>
$('select').combobox({bsVersion: 4});
$('select').on('change', function () {console.log(this.value)})
</script>
</body>
</html>