Column sorting feature breaks if the initial columns array doesn't have sort field

[seare-kidane]

Relates to #1233

When using BootstrapTable, if you first initialize the columns array without sort property and later update it to a different columns array with sort property, sorting doesn't work.

To Reproduce
Steps to reproduce the behaviour:

1. Create a React component with BootstrapTable
2. Initialize the the properties as follows

   keyField='id',
   columns=[{
       dataField: 'id',
       text: 'ID Column'
   }]

3. And then update the properties: e.g.

   keyField='first',
   columns=[{
       dataField: 'first',
       text: 'First Column',
       sort: true
   },
   {
       dataField: 'second',
       text: 'Second Column',
       sort: true
   }]

4. Try sorting either of the columns and you will see the a console error

   header-cell.js:123 Uncaught TypeError: onSort is not a function
       at cellAttrs.onClick (header-cell.js:123)
       at HTMLUnknownElement.callCallback (react-dom.development.js:336)
       at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
       at invokeGuardedCallback (react-dom.development.js:440)
       at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
       at executeDispatch (react-dom.development.js:584)
       at executeDispatchesInOrder (react-dom.development.js:609)
       at executeDispatchesAndRelease (react-dom.development.js:713)
       at executeDispatchesAndReleaseTopLevel (react-dom.development.js:722)
       at forEachAccumulated (react-dom.development.js:694)

I suspect this happens due to the BootstrapTableContainer context initializing the SortContext state on the constructor rather than doing it on the render.
I'm referring specifically to BootstrapTableContainer class constructor

constructor(props) {
    ...
    if (props.columns.filter(col => col.sort).length > 0) {
        this.SortContext = createSortContext(
          dataOperator, this.isRemoteSort, this.handleRemoteSortChange);
    }
    ...
}

Suggestion
Since the SortContext is dependent on the columns array and the columns array property can be updated at any given time, I suggest we move the above sort context initialization to the render method.

[AllenFang]

Thanks for bug report, @seare-kidane this issue will be better to handle on UNSAFE_componentWillReceiveProps. https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2/src/contexts/index.js#L87-L102

anyway, I will fix it soon

[AllenFang]

@seare-kidane fixed this in newest version: https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2020/02/09/version-bump.html

[seare-kidane]

@seare-kidane fixed this in newest version: https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2020/02/09/version-bump.html

@AllenFang Thanks for trying to fix this issue but I'm afraid the issue still exists. I was still able to reproduce using the same steps but this time it's inconsistent.

I think the inconsistency is the side effect of handling it in UNSAFE_componentWillReceiveProps as documented in: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

If you still don't want to update it on the render I think it's better to handle it from componentDidUpdate as suggested in the above doc.

[AllenFang]

@seare-kidane hmm... I can't reproduce it lol anyway, will double confirm/ thanks

[anderson-custodio]

Hi, I'm facing the same problem in version 3.3.4.

[robinofloxley]

I am experiencing this issue also as of 3.3.4. After reverting back to 3.3.3 I am not able to reproduce.

[seare-kidane]

@seare-kidane hmm... I can't reproduce it lol anyway, will double confirm/ thanks

@AllenFang I think I understand how I was able to reproduce it consistently; I was updating the columns array property after getting some data via ajax call. I.e. the columns array gets updated asynchronously.

If you wrap your columns array state updater to be inside a setTimeout() and give it like 3 sec delay you should be able to see the error.

[robinofloxley]

To add to the report that @seare-kidane has provided - I too was updating state asychronously, in my case via an async/await fetch within an onClick event on the table rows. Also, the codebase I'm working on uses React classes, and not functional hooks.

[daweifeng]

@AllenFang Hi Allen! I am experiencing a similar issue. After digging into the code, I believe there is a problem with https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2/src/contexts/index.js#L87-L93 It is the first if condition in UNSAFE_componentWillReceiveProps.

Let's say if the nextProps.columns.filter(col => col.sort).length > 0 is true and this.SortContext is not null, (nextProps.columns.filter(col => col.sort).length > 0 && !this.SortContext) will be false, which will cause this.SortContext set to null. In fact, this.SortContext should not be set to null because in the nextProps, we want our columns to be sorted. Setting this.SortContext will remove the sorting providers.