Por alguna razón, select2js parece funcionar independientemente del resto de mi aplicación en lo que respecta a los eventos de keydown de teclas.
Un ejemplo simple es la prevención de entradas:
$(() => { $("#select2-div").select2({ maximumSelectionLength: 5, allowClear: true, tags: true, width: "75%", tokenSeparators: [',', ' '], dropdownParent: $("#select2-div").parent() }) $(document).keydown((e) =>{ e.preventDefault(); }) }); <!doctype html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> </head> <body> <div style="display: flex; justify-content: center; align-items:center; width: 400px;"> <select multiple id="select2-div"> <option value="yes">Yes</option> <option value="no">No</option> <option value="maybe">Maybe</option> <option value="idontknow">I don't know</option> </select> <input style="margin-left: 30px; width: 100px"type="text"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> </body> </html>¿Por qué el usuario aún puede ingresar cosas en la entrada select2 (pero, con razón, no en la entrada estándar)? ¿Cómo puedo prevenir este comportamiento?
El evento se envía en dos fases, la fase predeterminada es la segunda, "burbujeante", que envía el evento primero al elemento secundario más interno donde se adjunta el oyente de select2 para que vea el evento primero, luego el evento se expande para document donde tu oyente lo ve.
La solución es agregar un oyente en la primera fase del evento, "capturar", donde el evento desciende (de la window al document al body y hacia abajo del árbol DOM hasta el elemento más interno), usando el DOM addEventListener con el tercer conjunto de parámetros a la true Si detiene el evento en un oyente de captura, no se enviará a los oyentes en la siguiente fase ("burbujeo").
window.addEventListener('keydown', e => { e.preventDefault(); // disables the browser's default behavior e.stopPropagation(); // disables the bubbling phase listeners }, true);Deshabilitar una tecla individual presionada dentro de un elemento específico:
window.addEventListener('keydown', e => { if (e.key === 'Escape' && e.target.closest('.select2-container')) { e.preventDefault(); // disables the browser's default behavior e.stopPropagation(); // disables the bubbling phase listeners } }, true); También puede usar el document aquí, que es el segundo objetivo en la fase de captura.