Strange scroll behavior when editing data in a sorted column (Firefox).

[wtfzambo]

Edit: see answers for solutions.

TL;DR - behavior is caused by Firefox + Bootstrap V5 + onChange events.

Hello,

I have react table that listens to data in real time from a firestore database. The leftmost column is of bool data type, and its values are rendered as controlled switches.

When a switch is toggled, it updates the value on the backend via a callback, which on turn updates the switch position. So far so good.

The problem came when I made the switches column sortable, in order to have the active rows on top and the inactive rows on the bottom.

What happens now, whenever I toggle a switch, is that the table immediately scrolls to the new switch position, and then scrolls back up. This is fine when enabling a switch (so it goes on top) but it's terrible experience in the opposite situation.

What's surprising, is that this does not happen if I update the value directly from the database. In that case, the normal behavior is retained (no jumpy scrolls).

I have no idea what's causing this and I haven't been able to reproduce it in code sandbox (I tried, but it behaves normally there). Any help or idea about what the heck I can do to address this issue is greatly appreciated.

Here's a gif that better illustrates what's happening:

PS: i haven't posted any code because it's relatively large and to be fair, I'm not even sure which part of the code could be causing this. If you need, I'll be glad to share.

[wtfzambo]

Small update:

Apparently this behavior is caused by bootstrap5 css. Disabling it makes the problem go away. Now, on to find which class is causing this issue.

[wtfzambo]

Update 2:

Should have thought about this before, but apparently this behavior only appears on firefox. If on chrome, nothing strange happens.

Downgrading to bootstrap 4.6 fixed the issue.

I haven't been able to pinpoint exactly what in bootstrap 5 is causing this.

[wtfzambo]

Update 3:

Found a way to fix this for firefox too. I still have no idea why Bootstrap v5 causes this problem, but in case someone stumbles upon the same problem, here's the solution:

When clicking on a switch, the backend receives the new value, thus updating the frontend, and the focus remains on said switch. This is what causes the crazy scrolling you see in the GIF, and also why manually changing the toggle value from the backend doesn't cause this problem.

To fix this, trigger the callback that updates the data upon onBlur event, instead of onChange, and make onChange trigger onBlur. This would have been obvious in case of an input field, but not so obvious for a toggle / checkbox / radiobutton, whatever.

Working example from my code:

import Toggle from 'react-toggle'

const switchButton = ({ data, updateBackend }) => {
    const { isToggled } = data;
    return (
        <Toggle
            checked={isToggled}
            onChange={(e) => e.target.blur()}
            onBlur={() => updateBackend(!isToggled)}
        />
    );
};