Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

On input sorting bug and search string not automatically emptied when not in options #1291

Open
razorkyle opened this issue Mar 19, 2025 · 1 comment
Open

On input sorting bug and search string not automatically emptied when not in options #1291

razorkyle opened this issue Mar 19, 2025 · 1 comment
Labels
bug

Comments

@razorkyle
Copy link

razorkyle commented Mar 19, 2025 •
edited
Loading

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:

  1. 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
Image

- Searched values should also sorted but if followed the arrangement in option
Image
Image

- Searched string is still there even it is not included on the options
Image

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
@razorkyle razorkyle added the bug label Mar 19, 2025
@razorkyle razorkyle changed the title On input sorting bug and search string not automatically emptied when not on options On input sorting bug and search string not automatically emptied when not in options Mar 19, 2025
@Xon
Copy link
Collaborator

Xon commented Mar 20, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Xon @razorkyle