I'm using the popover component with a text input component inside. Any time the user hits the spacebar, the popover closes.
All I really need is to stop Antd from calling onVisibleChange when the user hits the spacebar. I've tried using event.stopPropogation() and event.preventDefault on the input, but no luck. I have a bunch of dropdowns, selects, etc inside of the popover, so creating my own popover seems like it would be pretty tough to handle the handleOutsideClick functionality.
My Popover looks like:
<Popover
content={content}
title={null}
trigger="click"
getPopupContainer={(triggerNode) => triggerNode}
onVisibleChange={onChange}
visible={showMenu}
>
TLDR: I just want to stop the popover from closing when the spacebar is hit. But I also want to retain it closing if you click outside of it.
I belive the reason why spacebar will close the popover is because the button is focused by default. You could use a ref and remove focus inputRef.current?.blur(); as below.
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;
I think you must have a ref that indicate whether spacebar pressed or not with useRef and in visible change handler use it to decide to not hide the popover, its not a way that I like but It's probably works for you for now. if I find another better way I will tell you here
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;