primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.9k stars 1.05k forks source link

MultiSelect: The custom remove Icon cannot remove the item when clicked #4498

Closed re757575 closed 1 year ago

re757575 commented 1 year ago

Describe the bug

MultiSelect uses a custom Icon through removeIcon props and the display is chip, the item cannot be removed when the chip item is clicked.

https://github.com/primefaces/primereact/blob/9.5.0/components/lib/multiselect/MultiSelect.js#L506

Reproducer

https://codesandbox.io/p/sandbox/primereact-demo-forked-vhvt7p?file=%2Fsrc%2FApp.js%3A1%2C1

PrimeReact version

9.5.0

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

import { ReactComponent as Close } from "./close.svg";

<MultiSelect
  removeIcon={<Close />}
  display="chip"
/>

Expected behavior

click remove icon should remove item

melloware commented 1 year ago

Sorry the docs need updating can you try this...

removeIcon={(props) => <Close {...props.iconProps} />}

Fixed sandbox: https://codesandbox.io/p/sandbox/primereact-demo-forked-nnrqkj?file=%2Fsrc%2FApp.js%3A18%2C60