Multiselect:Checkbox in filter template wrong behavior

[Carmen1968]

Describe the bug

I'm using the Multiselect component with a filter template, this one includes a selectAll checkbox. In the Checkbox onChange event I do not get the expected result. The attached image shows how the implementation of the checkbox in the Multiselect differs from the implementation of the checkbox, causing the opposite result in this case.

Reproducer

https://codesandbox.io/embed/relaxed-bird-osip4u?fontsize=14&hidenavigation=1&theme=dark

PrimeReact version

8.6.1

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

1. check SelectAll checkbox

Expected behavior

All items selected

[melloware]

I am not quite sure why you are creating your own "SelectAll Checkbox" when this feature is built into the component?

[Carmen1968]

Because I need a custom layout so I have to use a template with my own selectAll checbox:

    const filterTemplate = (options: any) => {
    const { filterOptions } = options;
    const isChecked = !options.props.selectAll;
    console.log(isChecked);
    console.log("Options", options);

    return (
      <div className="grid">
        <div className="col flex justify-content-between align-items-center multiselect-header-separator">
          <Checkbox
            name="selectAllCheckbox"
            onChange={options.props.onSelectAll}
            checked={!options.props.selectAll}
          />
          <Boton
            tipoBoton="minimal"
            icon="meta-close meta-icono-color-negro"
            onClick={(e) => options.props.onClose(e)}
          />
        </div>
        <div className="col-12">
          <SearchInput
            name="filter"
            value={filterValue}
            placeholder="Buscar..."
            onChange={(e) => myFilterFunction(e, filterOptions)}
          />
        </div>
      </div>
    );
  };

[melloware]

OK I fixed your sandbox. You have to use Controlled Mode if with useState if you are going to render your own SelectAll checkbox.

See my sandbox: https://codesandbox.io/s/priceless-snow-7bk5c3?file=/src/demo/MultiSelectDemo.tsx