tyler-technologies-oss / forge

Framework agnostic Web Component library that implements the Tyler Forge™ design system.
Apache License 2.0
41 stars 11 forks source link

[table] forge-table-filter event fires multiple times #622

Open eliganemtyler opened 3 months ago

eliganemtyler commented 3 months ago

Describe the bug: The forge-table-filter event fires multiple times on filter value change depending on how many times the filter elements have been rendered.

To Reproduce: Steps to reproduce the behavior:

  1. Go to the forge demo app table page
  2. Enable filters
  3. Type a value in a column with a columnConfiguration filterDelegate of new TextFieldComponentDelegate(...) (e.g. Age)
  4. Note the filter event data is logged once
  5. Toggle off and back on the filters (or do anything that gets the table to re-render, like TableComponent.render())
  6. Repeat step 3
  7. Note the filter event data is logged twice

Expected behavior: The filter event should only fire once on filter change.

Please complete the following information:

Additional context: The cause of the issue seems to be that in _createFilterElement in table-utils.ts, delegate.onChange adds an event listener (e.g. an input event listener via onChange in text-field-component-delegate.ts), but doesn't remove the existing one. So each time _createFilterElement is called, an additional event listener accumulates on the element.

The bug occurs in any situation where the table renders and calls createFilterElement. A case where this is especially problematic is when the table renders on hiding or showing a column. Changing a filter after this will fire the event once with the old columnIndex and once with the new columnIndex.

drinoff commented 1 month ago

reproducible in Forge version : 3.0.0 as well