Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiselect: Errors on types and behaviour not as documented #4129

Closed
matefgo opened this issue Mar 3, 2023 · 1 comment · Fixed by #4130
Closed

Multiselect: Errors on types and behaviour not as documented #4129

matefgo opened this issue Mar 3, 2023 · 1 comment · Fixed by #4130
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component. Typescript Issue or pull request is *only* related to TypeScript definition
Milestone

Comments

@matefgo
Copy link

matefgo commented Mar 3, 2023

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".
image

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

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.

@matefgo matefgo added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 3, 2023
@melloware melloware added Typescript Issue or pull request is *only* related to TypeScript definition and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Mar 3, 2023
@melloware melloware self-assigned this Mar 3, 2023
@melloware melloware added this to the 9.2.1 milestone Mar 3, 2023
melloware added a commit to melloware/primereact that referenced this issue Mar 3, 2023
@melloware
Copy link
Member

PR Submitted.

mertsincan added a commit that referenced this issue Mar 9, 2023
@mertsincan mertsincan added the Type: Bug Issue contains a defect related to a specific component. label Mar 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component. Typescript Issue or pull request is *only* related to TypeScript definition
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants