Multiselect: Errors on types and behaviour not as documented

[matefgo]

Describe the bug

Hey guys, how are you doing?

I'd like to report something that's going on with the MultiSelect component. I'm currently at v8.7.3, but I'm afraid this persisted at the current version (v9.2.0).

As seen in the docs, we have a clear way to build a custom filter template.

const filterTemplate = (options) => {
    let {filterOptions} = options;

    return (
        <div className="flex gap-2">
            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
        </div>
    )
}

filterOptions is destructed from the options argument which is typed as MultiSelectFilterOptions. But there's no filterOptions declared in this interface.

interface MultiSelectFilterOptions {
    filter?: (event?: KeyboardEvent) => void;
    reset?: () => void;
}

The filter function as seen above is typed as KeyboardEvent, which may be a mistake as the current event type passed by the input at the onChange event is typed as ChangeEvent<HTMLInputElement>, by default, and even at the InputText component, used in the docs example.

This one is just a type problem, because the current returned event is "correct".

But, besides the type problem, the reset function is not working properly.

Above, we can see the error is at props.resetFilter(). I did some digging but I couldn't find anything that could explain why this is not working. I don't know if when using a custom onFilter, the resetFilter function is not passed as prop. I'm afraid even the docs example would not work.

const myResetFunction = (options) => {
    setFilterValue('');
    options.reset();
    filterInputRef && filterInputRef.current.focus()
}

Reproducer

No response

PrimeReact version

8.7.3

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

1. Create a MultiSelect component.
2. Create custom filterTemplate
3. Try access filterOptions from the filterTemplate passed argument.
4. Use filter and reset functions on custom inputs.

Expected behavior

Types represeting the actual event structure and methods of filter and reset working properly.

[melloware]

PR Submitted.