React-bootstrap-table2: Controlled <input> components lose focus on re-render inside expanded rows

[anttiviljami]

When you add a controlled input field component inside an expanded row, this happens:

Looks like the entire <tbody> DOM node gets re-created by React on every render of the BootstrapTable component.

Tried to look into it and my best guess is it has something to do with the Context api causing unnecessary re-renders due to https://reactjs.org/docs/context.html#caveats, but couldn't figure it out in reasonable time.

As far as I can see, nothing in the DOM tree should actually cause the React reconciliation algorithm to re-create <tbody>

[AllenFang]

I will look into on it. Anyway, thanks!

[Mujaddadi]

I have similar issue. But mine is in not in expanded rows but normal cell column. When I add control component with the selectRow property. it works. When I add selectRow it, it shows similar behavior as above.

[amsterdamharu]

Demo of this behavior: https://codesandbox.io/s/github/amsterdamharu/bootstrap-table-extend-bug

Problem is that when the expandRow.renderer dispatches an action that will cause bootstrap-table to re render the bootstrap-table will unmount the expandRow.renderer and re mount it.

[meghnaraju]

Hi Allen,

in react bootstrap table, i am unmounting and mounting the table. But once i mount it again i am unable to select any checkbox. if i do display none it works fine. But if i remount it, checkboxes r not working. I have an urgent requirement. pls help

[mkwenzel]

I'm wondering if I am running into this same issue - I have a table with checkbox select that is viewable in 2 places, one place is inside an expandable row of another table, the other place it is not. It works fine outside of the expandable table, but inside the click event is registering (I can console.log("click")) but the checkbox does not check.

Gif of issue:

[mkwenzel]

@anttiviljami @amsterdamharu Did either of you find a solution for this?

[anttiviljami]

No resolution. I just ended up implementing the table myself instead of using react-bootstrap-table. Couldn’t fix this issue within reasonable time.

[AllenFang]

@mkwenzel i think your issue might be different with this, please open another issue, I will check it, thanks

[AllenFang]

Sorry I missed this issue for a long time, my bad, I will fix this issue in next version, thanks

[AllenFang]

Fixed, please check RELEASE NOTE, please remember to upgrade the packages which mention in RELEASE NOTE to make sure you have correct patch.

[AllenFang]

Again, sorry for lately fixing this issue. Please let me know if this issue still remain. thanks

[joecrismolina]

Hi Allen, first of all, thank you for this awesome library, great work! I tried the latest update v2.1.1 and am still having problems with the re-rendering of the expanded row and losing focus on controlled components inside the expanded row. https://codesandbox.io/s/1olom8kk9l
Is this an issue or am I using the expanded row feature in an unintended way?

best regards, cheers!

[apausepi]

Hi Allen, I have the same problem if I don't use editCell. I add the input field directly in formatted column function because I want display all inputs without click.