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

koendeschacht · 2022-03-21T08:46:53Z

koendeschacht
Mar 21, 2022

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.

Buroni · 2022-05-03T20:41:15Z

Buroni
May 3, 2022

I wouldn't say this is a bug with revogrid. Globally overriding the default behaviour of a HTML attribute is almost guaranteed to cause some weird behaviour. Is it possible for you to localise this style rule?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

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

koendeschacht Mar 21, 2022

Replies: 1 comment

Buroni May 3, 2022

koendeschacht
Mar 21, 2022

Buroni
May 3, 2022