Menu auto-closes on MenuItem.template clicks even when interacting with custom content

Đang mở
  • Có gì không ổn?
#8,433 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
50/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ việc xử lý thao tác nhấp vào mục popup Menu và tái hiện vấn đề với ví dụ MenuItem.template và Checkbox được cung cấp. Theo dõi cách các thao tác nhấp vào nội dung template được xử lý, sau đó xác minh rằng việc tương tác với các phần tử template vẫn giữ menu mở, trong khi hành vi thông thường của các mục menu không thay đổi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Status: Needs Triage

Title: Menu auto-closes on MenuItem.template clicks

Description:
When using a Menu with MenuItem.template, any click inside the template (e.g., a checkbox) closes the menu immediately. The menu should stay open while interacting with elements inside the template.

Minimal Reproducible Example:

import React, { useState, useRef } from "react";
import { Menu } from "primereact/menu";
import { Button } from "primereact/button";
import { Checkbox } from "primereact/checkbox";

export default function ColumnMenuExample() {
  const menuRef = useRef<Menu>(null);
  const [checked, setChecked] = useState(false);

  const items = [
    {
      template: () => (
        <div onClick={(e) => e.stopPropagation()}>
          <Checkbox checked={checked} onChange={() => setChecked(!checked)} />
          Column 1
        </div>
      ),
    },
  ];

  return (
    <div>
      <Button label="Toggle Menu" onClick={(e) => menuRef.current?.toggle(e)} />
      <Menu ref={menuRef} popup model={items} />
    </div>
  );
}

Steps to Reproduce:

  1. Click “Toggle Menu”.
  2. Click the checkbox inside the menu.

Actual behavior: Menu closes after checkbox click.
Expected behavior: Menu should stay open while interacting with template elements.

Workaround: Adding onClick={(e) => e.stopPropagation()} on the template prevents auto-close.

Environment:

"primereact": "^10.9.7",
"react": "19.2.1",

Ngôn ngữ chính
CSS
Star
8.3k
Fork
1.2k
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của primefaces/primereact

Tất cả issue của primefaces/primereact

Issue tương tự

Thêm issue về Web Dev

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.