Reacted keyboard events are not stopped #1039
Description
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/bootstrap@5.1.3/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/bootstrap@5.1.3/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
- Open the modal using button.
- Click the top normal select box, then press
Esc- select box closes, modal stays.
- Click the bottom choices improved select box, then press
Esc- modal closes (select box too).
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.