Estoy creando un menú Dropdown
usando React.
Pero no tengo idea de cómo implementar handleClose()
.
Quiero:
<Dropdown>
=> handleClose()
<ActionMenu>
=> handleClose()
<ActionMenu>
=> handleClose()
si no se llamó a preventDefault()
<ActionMenu enabled={false}>
=> no hacer nada<ActionMenu enabled={false}>
=> no hacer nada<ActionMenu>
=> no hacer nada<NonActionMenu>
=> no hacer nada<NonActionMenu>
=> no hacer nada<Dropdown>
perdió el foco ( onBlur=
) porque un elemento fuera del menú desplegable obtuvo el foco => handleClose()
<Dropdown>
perdió el foco ( onBlur=
) porque un elemento dentro del menú desplegable se centró => no hacer nada La implementación <Dropdown onBlur={() => handleClose()} ...>
funciona para el punto 9 pero falló para el punto 10.
¿Puedes sugerir tu idea?
No tengo sandbox porque el proyecto es bastante complejo.
Pero puedes bifurcar y modificar aquí: mi proyecto
Para el clic, puede agregar un detector de eventos al objeto de la ventana para encargarse de cualquier clic fuera del contenedor desplegable. También puede modificar esto para la tecla enter:
window.addEventListener('click', function(e) { const dropDownWrapper = document.querySelector('#id of dropdown wrapper'); const path = e.path || (e.composedPath && e.composedPath()); if (!path.some(x => !(x instanceof SVGElement) && x.id && x.id === '#id of dropdown wrapper')) { dropDownWrapper.querySelector('.class of dropdownlist') ? x.querySelector('.class of dropdownlist').style.display = 'none' : null } else{ dropDownWrapper.querySelector('.class of dropdownlist') ? x.querySelector('.class of dropdownlist').style.display = 'block' : null } }, true);