事件监听 - 为何点击后立刻消失，click事件未触发？

Question

点击之后立马消失，click事件不会触发?

https://codepen.io/perterhuan/pen/LYoxoGO

我想实现这样的效果

• 点击之后弹出选择框
• 点击选择其中一个选项之后，选择框立马消失。

尝试

• 借助于ant design的popover, trigger为focus，children为一个button, content为ant design List。
• 点击button(此时会focus)弹出List
• 在List上处理List.item上的click事件
• 一旦点击之后，button失焦弹出框会消失，但是click事件并没有被触发

function CommentTitle({  commentsCount,  chooseSortRule,  sortRules,  currentSelectedSortRule,}) {  return (    <Flex gap="middle" align="center">      <div>{commentsCount > 0 ? commentsCount + " " : ""}留言</div>      <Flex gap="small" align="center">        <ConfigProvider wave={{ disabled: true }}>          <Popover            content={              <List                dataSource={sortRules}                renderItem={(item) => <List.Item>{item}</List.Item>}                className="my-pop-list"                onClick={() => {                  console.log("click");                }}              />            }            rootClassName="my-pop"            trigger="focus"          >            <Button              icon={<Icon component={Sort} />}              rootClassName="border-none outline-none peer"              data-testid="trigger"            />          </Popover>        </ConfigProvider>        排序      </Flex>    </Flex>  );}

如何让这个click事件被触发呢?

Answer 1

click执行时机晚于blur，可以把click换成mousedown试试