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

Reacted keyboard events are not stopped #1039

Closed
toy opened this issue May 26, 2022 · 0 comments
Closed

Reacted keyboard events are not stopped #1039

toy opened this issue May 26, 2022 · 0 comments
Labels
bug

Comments

@toy
Copy link

toy commented May 26, 2022 •
edited
Loading

Describe the bug
I noticed behaviour in a choices enhanced select inside bootstrap modal. If I open a normal select and press Esc - the select box hides, but if I open choices select and press Esc - the modal closes.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" rel="stylesheet">
    <title>Hello, world!</title>
  </head>
  <body>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
      Launch demo modal
    </button>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <select name="default">
              <option>Hello</option>
              <option>world</option>
              <option>!</option>
            </select>
            <select name="choices">
              <option>Hello</option>
              <option>world</option>
              <option>!</option>
            </select>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
    <script>
      const choices = new Choices('select[name=choices]');
    </script>
  </body>
</html>

To Reproduce

  1. Open the modal using button.
  2. Click the top normal select box, then press Esc - select box closes, modal stays. image
  3. Click the bottom choices improved select box, then press Esc - modal closes (select box too). image

Desktop (please complete the following information):

  • OS: macOS
  • Browser: Google Chrome
  • Version: 102.0.5005.61

Additional context
Adding if (hasActiveDropdown) event.stopPropagation(); in case ESC_KEY: fixes the behaviour.
@toy toy added the bug label May 26, 2022
Xon added a commit to Xon/Choices.js that referenced this issue Jul 15, 2024
@Xon
Fix 'esc' would close the dropdown and also apply to the container re…
cd74aec 
…sulting in an overlay/modal unexpectedly closing

Choices-js#1039
@Xon Xon mentioned this issue Aug 6, 2024
Merged
9 tasks
@Xon Xon closed this as completed Aug 22, 2024
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
@toy @Xon