Choices-js
On input sorting bug and search string not automatically emptied when not in options
Describe the bug Search dropdown result is not sorted and the input string in searching values on blur is still there even if the string is not on the option
To Reproduce Steps to reproduce the behavior:
- Tried in Edge, Chrome, Opera
Expected behavior The result values should also sorted and the search string is removed when not in the option
Screenshots
- Options is sorted when on input
- Searched values should also sorted but if followed the arrangement in option
- Searched string is still there even it is not included on the options
Current Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Choices.js with Bootstrap 5.3</title>
<!-- Bootstrap 5.3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Choices.js CSS -->
<link href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" rel="stylesheet">
</head>
<body class="p-4">
<div class="container">
<h2 class="mb-4">Choices.js with Bootstrap 5.3</h2>
<!-- Select with Bootstrap styling -->
<label for="exampleSelect" class="form-label">Select an Option:</label>
<select id="exampleSelect" class="form-select" multiple>
<option value="4">Option 4</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<!-- Bootstrap 5.3 JS (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Choices.js JS -->
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script>
// Initialize Choices.js
document.addEventListener('DOMContentLoaded', () => {
const element = document.getElementById('exampleSelect');
const choices = new Choices(element, {
removeItemButton: true, // Allow item removal
placeholder: true, // Enable placeholder
placeholderValue: 'Select options', // Custom placeholder
searchEnabled: true, // Enable search
maxItemCount: 1, // Limit the number of items
duplicateItemsAllowed: false, // Prevent duplicates
allowHTML: false,
shouldSortItems: true,
searchResultLimit: 2,
addItems: false, // Restrict to predefined options
});
});
</script>
</body>
</html>
Choices version and bundle
- V11
Desktop (please complete the following information):
- OS: Windows 10
- Browser: Edge, Opera, Chrome, Firefox
- Version: Latest
Smartphone (please complete the following information):
- Did not use mobile browsers
This is something of a deliberate design choice, the actual backing option isn't set with the invalid value and forcing the search to always have a valid value would have negative impact on usability of some of the features
