defaultFilterValue and filterValue initial Date values are not displayed in the column header

[Eric2048]

• what edition are you using - community
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 5.8.1

Relevant code or config

• SEE Reproduction below

What you did:

• Set a defaultFilterValue (or a controlled filterValue), with a Date value

What happened:

• The Date value is NOT displayed in that column's header

Reproduction repository: This can easily be reproduced on your own Docs page: -- see attached screenshot and follow these steps: 1) open https://reactdatagrid.io/docs/filtering#date-filters 2) Click the "Filterable DataGrid with date filter" running code example, click the Page icon in the top-right corner to see the sample code next to the running result 3) In the code listing, change this line: { name: 'createdOn', operator: 'after', type: 'date', value: '' } setting the default value: { name: 'createdOn', operator: 'after', type: 'date', value: '2019-01-01' } 4) In the running example on the right side, note that the Grid re-renders and shows the correct filtered set of data but that date is not displayed in the header for that column. 5) If instead you select that Date 2019-01-01 from the Date Picker / Calendar, you will see the Date value displayed in the column filter header. Therefore there is an inconsistency in the displayed result between the programmatically-set value and the User-selected value.

Problem description:

• When setting defaultFilterValue with a default Date value for a specific column, that Date value is immediately applied and impacts the list of filtered rows but that Date value is not displayed in the filter header for that column. This can confuse users as they are not sure if the filter was applied.
• Same issue if you use the controlled filterValue property with default values (or later values) coming from Redux via setFilterValues() -- the programmatically set filter value does impact the list of rows but is not displayed in the filter header.

Suggested solution: Add this to your reactdatagrid-community/DateFilter/index.tsx:

          +++ if (finalProps.value && !finalProps.text && window.moment) {
          +++   finalProps.text = window.moment(finalProps.value).format(finalProps.dateFormat);
          +++ }
          return this.props.render(_react.default.createElement(_Calendar.DateInput, _objectSpread({}, finalProps)));

(Without access to your commented source code, I can't suggest a better way to fix this issue.)

Note: this only fixes the "single date" case -- you will need another fix above that for the "date range" case, i.e. case 'inrange' and case 'notinrange'.

[Eric2048]

For anyone else running into this issue, I came up with a temporary workaround using filterEditorProps.placeholder:

filterEditorProps: (props, { index }) => {
  return {
    placeholder: props.filterValue.value ?
      moment(props.filterValue.value).format('M/D/YYYY') :
      (index ? 'Created date is before...' : 'Created date is after...')
  }
},

This will cause the filterValue to be displayed in the cases I listed above. However setting placeholder has the side-effect that the "X" cancel button will never be shown in the column header -- even if the user selects a date from the Calendar. The bug fix outlined above would be preferable.

[inovua-admin]

Fixed in version 5.8.2.