Adding [hidden] { display: none !important ; } breaks scrolling when focusing elements outside viewport

When you add a style

[hidden] {
display: none !important ;
}

The table does not scroll to the right when you use the keyboard to focus a cell on the far right of the table.

Test case:

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@revolist/revogrid@latest/dist/revo-grid/revo-grid.js"></script>
  <title>test revogrid</title>
  <style>
 [hidden] {
        display: none !important;
 }
 </style>
</head>
<body>
<h1>Test revogrid</h1>

If you use the keyboard arrows to move the focused cell to the right the scroll bar does not follow the focus.
<br><br>

<revo-grid style="height: 200px"/>
<script>
const grid = document.querySelector('revo-grid')
let columns = []
let values = []
for (let i = 0; i < 20; i++) {
  values.push({})
}
for (let col = 0; col < 40; col++) {
  columns.push({ prop: `col${col}`, name: `col${col}` })
  for (let i = 0; i < values.length; i++) {
    values[i][`col${col}`] = `col${col}`
  }
}

grid.columns = columns
grid.source = values
</script>
</body>
</html>

You can also try this it at

https://koendeschacht.be/test_revogrid.html

I logged this issue last week https://github.com/revolist/vue-datagrid/issues/39 in vue-datagrid, but since then I realized it's an issue for this repo.

revolist / revogrid

Adding [hidden] { display: none !important ; } breaks scrolling when focusing elements outside viewport #303