ColumnFilterElementTemplateOptions.filterModel type mismatch: declared as ColumnFilterModelOptions but runtime passes ColumnFilterMetaData

Aperta
  • Qualcosa non va?
#8,483 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
52/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Confronta la dichiarazione di ColumnFilterElementTemplateOptions con l’utilizzo a runtime in ColumnFilter.js, in particolare con il filterModel passato a filterElement intorno alle righe 50, 432 e 512. Verifica il riproduttore TypeScript fornito e aggiorna la dichiarazione in modo che corrisponda all’oggetto dei metadati a runtime; il lavoro è completato quando l’accesso a matchMode non produce più un errore di tipo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Status: Needs Triage
Describe the bug

When using custom filterElement in DataTable column, runtime argument passed to rendering function is not of type declared in ColumnFilterElementTemplateOptions.filterModel but actually ColumnFilterMetaData | ColumnFilterMetaDataWithConstraint, example:

Image

The TypeScript definition for ColumnFilterElementTemplateOptions.filterModel incorrectly declares it as ColumnFilterModelOptions (a dictionary type), but the runtime implementation in ColumnFilter.js actually passes a single ColumnFilterMetaData object.

This forces developers to either:

  • Use any type to bypass TypeScript errors
  • Apply incorrect type casts
  • Lose type safety when implementing custom filter elements
Image

In ColumnFilter.js:

Line 50 - Extracts single field's metadata:
const filterModel = props.filters[field];

Line 512 - Passes single metadata object to user's filterElement:
ObjectUtils.getJSXElement(getColumnProp('filterElement'), { field, index, filterModel: model, // 'model' is ColumnFilterMetaData, not ColumnFilterModelOptions value, filterApplyCallback, filterCallback })

Line 432 - Returns array of individual ColumnFilterMetaData objects:
const fieldConstraints = () => { return filterModel ? filterModel.constraints || [filterModel] : []; };

Line 91 - Uses .matchMode directly:
const isRowMatchModeSelected = (matchMode) => { return filterModel && filterModel.matchMode === matchMode; };

Language
TypeScript 5.x
Build / Runtime
[ ] Angular
[ ] Vue
[x] React
[ ] Other
Browser(s)
All (this is a TypeScript definition issue)

Reproducer

No response

System Information
Binaries:
    Node: 20.11.0
    Yarn: 1.22.19
    npm: 10.2.4
  Browsers:
    Edge: Chromium (140.0.3485.81)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    primereact: ^10.9.2 => 10.9.2
    react: ^18.3.1 => 18.3.1
Steps to reproduce the behavior

import { Column } from 'primereact/column';
import { DataTable } from 'primereact/datatable';
import { ColumnFilterElementTemplateOptions } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { FilterMatchMode} from "primereact/api";

<Column
field="name"
filter
filterElement={(options: ColumnFilterElementTemplateOptions) => {
// TypeScript error: Property 'matchMode' does not exist on type 'ColumnFilterModelOptions'
const isCustomMode = options.filterModel.matchMode === FilterMatchMode.CUSTOM;

// To access matchMode, developers must do:
// const filterData = options.filterModel[options.field] as ColumnFilterMetaData;
// filterModel is already the single field's metadata

return <InputText value={options.value} />;

}}
/>

Expected behavior

interface ColumnFilterElementTemplateOptions {
field: string;
index: number;
filterModel: ColumnFilterMetaData; // Correct type ?
value: any;
filterApplyCallback(value?: any, index?: number): void;
filterCallback(value?: any, index?: number): void;
}

Lingua principale
CSS
Stelle
8.3k
Fork
1.2k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di primefaces/primereact

Tutte le issue di primefaces/primereact

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.