Antd - Is it possible to stop the spacebar from closing a popover menu?

user_4811772 0
Viewed 491

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.

popover antd reactjs html javascript
2 Answers

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;
user_18493660

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;

Fixed Codesandbox

user_18611440
Related