onRowClick fires only when I click on a cell padding.

[achraf-jeday]

Actually, the title says it all.

I am using onRowClick event to fire a function that will display an overlay.

Everything was working as expected until recently. I noticed that when I click on a row the onRowClick event doesn't fire.

After some investigation, I discovered that it's firing only when a cell padding is clicked but not its content.

Did anyone encounter the same issue?

Thanks for your time.

[wgorman]

Your issue might be related to #994

[AllenFang]

@achraf-jeday, yap, this issue might be related with #994, I'll fix it as soon as possible. :)

[AllenFang]

@achraf-jeday, could you please show me your selectRow configuration or a simple example which can reproduce this issue? thank 👍

[achraf-jeday]

@AllenFang, Sorry for the delay.

This is the table:

  const options = {
    hideSizePerPage: true,
    page: activePage,
    onPageChange: onNavigatePage,
    onRowClick: onRowClick
  };

  return(
    <BootstrapTable
      trClassName={ trClassFormat }
      data={organizationsList}
      fetchInfo={{dataTotalSize: organizations.resultsCount}}
      options={options}
      remote
      hover
      pagination>
      <TableHeaderColumn
        columnClassName={ "collapsed-table-row" }
        className='bs-table-header'
        isKey
        dataField="name" dataFormat={formatName}>
        Organization Name
      </TableHeaderColumn>
      <TableHeaderColumn
        columnClassName={ "collapsed-table-row" }
        className='bs-table-header'
        dataField="address" dataFormat={formatName}>
        Address
      </TableHeaderColumn>
      <TableHeaderColumn
        columnClassName={ "collapsed-table-row" }
        className='bs-table-header'
        dataField="city" dataFormat={formatName}>
        City
      </TableHeaderColumn>
      <TableHeaderColumn
        columnClassName={ "collapsed-table-row" }
        className='bs-table-header'
        dataField="country" dataFormat={formatName}>
        Country
      </TableHeaderColumn>
      <TableHeaderColumn
        columnClassName={ "collapsed-table-row" }
        className='bs-table-header'
        dataField="certificates" dataFormat={showStandards}>
        Standards
      </TableHeaderColumn>
      <TableHeaderColumn
        columnClassName={ "collapsed-table-row" }
        className='bs-table-header'
        dataField="certificates" dataFormat={showScopes}>
        Scope category
      </TableHeaderColumn>
    </BootstrapTable>
    );

This is the onRowClick function:

  onRowClick(row) {
    this.setState({ layerActive: true });
    this.setState({ row: row });
    let url = "http://api.company.someurl.com/api/entity/" + row.nid + "/card";
    this.props.actions.getCards(url);
  }

These are the functions that I'm using to format the content of some cells:

function toTitleCase(str)
{
  return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

function formatName(cell, row) {
  return toTitleCase(cell);
}

I am using redux to pass data and functions from one component to another.

I will use an older version of the table until this is fixed.

Thank you @AllenFang and @wgorman.

[AllenFang]

@achraf-jeday, thank you :)

[AllenFang]

Fixed on v2.11.0, check it out and let me know if the problem still remain.

[shadeven]

@AllenFang I upgraded to v.2.11.0, however the problem is still there.
I use WebPack and I upgraded both js and css. Any idea?

[AllenFang]

@shadeven, make sure you have upgrade successfully, and could you please show me your code snippet. Keep it simple and minimal for me to reproduce

[shadeven]

@AllenFang It was a silly mistake from my end. All good now. Thanks anyway.
By the way, love your new avatar:)

[shadeven]

@AllenFang One more question if you don't mind. When transpiling jsx files using Webpack, I use the version 2.9.1, but in my application, I mistakenly use the source code of version 2.3.4. The application seems work fine. But what would be the best practise in this case? Why does the transpiled js work with an older version?

[AllenFang]

Why does the transpiled js work with an older version?

I think it's impossible, because you can only reference one dependency and I'm interesting that how did you use the source code with 2.3.4, use npm link? and how did you use both different version at the same time?

thank 👍

[shadeven]

@AllenFang It's along story. The project is built using PHP and the team decided to introduce React to the project about one year ago. It uses an odd way to transpile JSX. Basically JSX are transpiled in a different directory and JS files are manually copied under project workspace afterwards. For CSS files, There are references in html directly pointing to the directory where react-bootstrap-table source code sits.

My question is after JSX are transpiled, do we still need the source code such as react-bootstrap-table.js?

[AllenFang]

My question is after JSX are transpiled, do we still need the source code such as react-bootstrap-table.js?

You can drop the source code I think, you can try it with a experiment

[shadeven]

@AllenFang What about CSS files?

[AllenFang]

Same with JS, the css file is most easy to handle, it only minify~

[shadeven]

@AllenFang I meant can CSS file be dropped after transpiling?

[AllenFang]

For CSS files, There are references in html directly pointing to the directory where react-bootstrap-table source code sits.

ah sorry, for you CSS case, you should not drop it, because you use it directly.

[shadeven]

That makes sense. One more question, if I use react-bootstrap-table-all.min.css, is toastr.css still required?

[AllenFang]

That makes sense. One more question, if I use react-bootstrap-table-all.min.css, is toastr.css still required?

No need ~