Estoy usando el componente popover con un componente de entrada de texto dentro. Cada vez que el usuario presiona la barra espaciadora, la ventana emergente se cierra.
Todo lo que realmente necesito es evitar que Antd llame a VisibleChange cuando el usuario presiona la barra espaciadora. Intenté usar event.stopPropogation() y event.preventDefault en la entrada, pero no tuve suerte. Tengo un montón de menús desplegables, selecciones, etc. dentro de la ventana emergente, por lo que crear mi propia ventana emergente parece que sería bastante difícil manejar la funcionalidad handleOutsideClick.
Mi Popover se parece a:
<Popover content={content} title={null} trigger="click" getPopupContainer={(triggerNode) => triggerNode} onVisibleChange={onChange} visible={showMenu} >TLDR: solo quiero evitar que la ventana emergente se cierre cuando se presiona la barra espaciadora. Pero también quiero mantenerlo cerrado si hace clic fuera de él.
Creo que la razón por la cual la barra espaciadora cerrará la ventana emergente es porque el botón está enfocado de forma predeterminada. Podría usar una referencia y eliminar el foco inputRef.current?.blur(); como a continuación.
https://codesandbox.io/s/antd-reproduction-template-forked-g0xld
import React, { useState, useRef } from "react"; import { Button, Popover, Input } from "antd"; const HistogramInsight = (props) => { const [isVisible, setIsVisible] = useState(false); const inputRef = useRef(null) const handleVisibleChange = (isVisible) => { setIsVisible(isVisible); if (isVisible) { inputRef.current?.blur(); } }; return ( <div style={{ width: 300 }}> <h2>I want to have an input in a popover/tooltip.</h2> <h4>Hitting the spacebar with the popover open will close it.</h4> <Popover content={ <Input style={{ width: 200 }} placeholder="Type Hello World" /> } title={null} trigger="click" visible={isVisible} onVisibleChange={handleVisibleChange} getPopupContainer={(triggerNode) => triggerNode} > <Button ref={inputRef}>Open Popover</Button> </Popover> </div> ); }; export default HistogramInsight;Creo que debe tener una referencia que indique si la barra espaciadora se presionó o no con useRef y, en el controlador de cambios visible, utilícela para decidir no ocultar la ventana emergente, no es una forma que me guste, pero probablemente funcione para usted por ahora. si encuentro otra forma mejor te lo dire aqui
const HistogramInsight = (props) => { const [isVisible, setIsVisible] = useState(false); const spacePressedRef = useRef(false); const handleVisibleChange = (isVisible) => { if (spacePressedRef.current) { setIsVisible(true); spacePressedRef.current = false; } else { setIsVisible(isVisible); } }; const handleKeyUp = (event) => { if (event.which === 32) { spacePressedRef.current = true; console.log("Space pressed."); } }; return ( <div style={{ width: 300 }}> <h2>I want to have an input in a popover/tooltip.</h2> <h4>Hitting the spacebar with the popover open will close it.</h4> <Popover content={ <Input onKeyUp={handleKeyUp} style={{ width: 200 }} placeholder="Type Hello World" /> } title={null} trigger="click" visible={isVisible} onVisibleChange={handleVisibleChange} getPopupContainer={(triggerNode) => triggerNode} > <Button>Open Popover</Button> </Popover> </div> ); }; export default HistogramInsight;