es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Antd – ¿Es posible evitar que la tecla de espacio cierre un menú popover?

17 Jul, 2023 Programación

Estoy utilizando el componente popover con un componente de entrada de texto adentro. Cada vez que el usuario presiona la barra espaciadora, el popover se cierra.

Todo lo que realmente necesito es evitar que Antd llame a onVisibleChange cuando el usuario presiona la barra espaciadora. He intentado usar event.stopPropogation() y event.preventDefault en el componente de entrada, pero no tuve suerte. Tengo varios menús desplegables, selectores, etc. dentro del popover, por lo que crear mi propio popover parecería bastante difícil de manejar la funcionalidad de hacer clic afuera.

Mi Popover se ve así:

<popover content="{content}" title="{null}" trigger="click" getpopupcontainer="{(triggerNode)" ==""> triggerNode}
  onVisibleChange={onChange}
  visible={showMenu}
>

En resumen, solo quiero evitar que el popover se cierre cuando se presiona la barra espaciadora. Pero también quiero que se cierre si se hace clic fuera de él.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para evitar que el popover se cierre al presionar la barra espaciadora pero mantener su capacidad de cerrarse al hacer clic fuera de él, puedes probar lo siguiente:

    1. Añade un escuchador de eventos en el componente de entrada dentro del popover para detectar cuando se presiona la barra espaciadora.
    2. En el escuchador de eventos, evita el comportamiento predeterminado de la tecla de la barra espaciadora.
    3. Crea una nueva función para manejar el evento onVisibleChange del popover. Esta función solo debe ser llamada si no se presionó la barra espaciadora.
    4. Pasa esta nueva función como la propiedad onVisibleChange para el componente popover.

    Aquí tienes un ejemplo de fragmento de código para ilustrar esto:

    const handleSpacebar = (event) => {
  if (event.keyCode === 32) {
    event.preventDefault();
  }
}

const handlePopoverChange = (visible) => {
  if (!spacebarPressed) {
    // realiza tu lógica para manejar el cambio de visibilidad aquí
    setShowMenu(visible);
  }
}

<popover content="{content}" title="{null}" trigger="click" getpopupcontainer="{(triggerNode)" ==""> triggerNode}
  onVisibleChange={handlePopoverChange}
  visible={showMenu}
>
  <input type="text" onkeydown="{handleSpacebar}">
</popover>

    En este ejemplo, hemos añadido un escuchador de eventos onKeyDown al componente de entrada para detectar cuando se presiona la tecla de la barra espaciadora. Si se presiona, evitamos el comportamiento predeterminado (que sería cerrar el popover).

    También creamos una nueva función llamada handlePopoverChange, que pasamos como propiedad onVisibleChange para el componente popover. Esta función solo maneja el cambio de visibilidad si no se presionó la barra espaciadora (usando una variable booleana spacebarPressed).

    Puedes adaptar este código para que funcione con tu caso de uso específico, pero la idea general es separar el manejo de la tecla de la barra espaciadora del manejo del cambio de visibilidad del popover.

Comments are closed.