{"action":"created","issue":{"url":"https://api.github.com/repos/plotly/dash-table-experiments/issues/8","repository_url":"https://api.github.com/repos/plotly/dash-table-experiments","labels_url":"https://api.github.com/repos/plotly/dash-table-experiments/issues/8/labels{/name}","comments_url":"https://api.github.com/repos/plotly/dash-table-experiments/issues/8/comments","events_url":"https://api.github.com/repos/plotly/dash-table-experiments/issues/8/events","html_url":"https://github.com/plotly/dash-table-experiments/issues/8","id":260408431,"node_id":"MDU6SXNzdWUyNjA0MDg0MzE=","number":8,"title":"Page jumps to selected cell on table on rerender","user":{"login":"mjclawar","id":16123745,"node_id":"MDQ6VXNlcjE2MTIzNzQ1","avatar_url":"https://avatars3.githubusercontent.com/u/16123745?v=4","gravatar_id":"","url":"https://api.github.com/users/mjclawar","html_url":"https://github.com/mjclawar","followers_url":"https://api.github.com/users/mjclawar/followers","following_url":"https://api.github.com/users/mjclawar/following{/other_user}","gists_url":"https://api.github.com/users/mjclawar/gists{/gist_id}","starred_url":"https://api.github.com/users/mjclawar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mjclawar/subscriptions","organizations_url":"https://api.github.com/users/mjclawar/orgs","repos_url":"https://api.github.com/users/mjclawar/repos","events_url":"https://api.github.com/users/mjclawar/events{/privacy}","received_events_url":"https://api.github.com/users/mjclawar/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2017-09-25T20:42:31Z","updated_at":"2018-11-09T15:50:37Z","closed_at":null,"author_association":"NONE","body":"### Description\r\nWhen a `DataTable` is in a dash app with scroll, the page location jumps to the selected cell on the table whenever *anything* on the page updates. This makes using the experimental `DataTable` in a scrollable app very frustrating for a user. \r\nThis occurs on (at least)\r\n- Chrome on Linux\r\n- Firefox on Linux\r\n- Chrome on Windows 10\r\n\r\n### Desired behavior\r\nThe page should not jump to the table when other components are updated or the page is refreshed.\r\n\r\n### Example code\r\n```python\r\nimport dash\r\n\r\nimport dash_html_components as html\r\nimport dash_table_experiments as dt\r\n\r\n\r\napp = dash.Dash(name='dash')\r\n\r\n\r\napp.layout = html.Div(children=[\r\n    html.Div('This is a tall div', style=dict(height=1000, width='100%')),\r\n    dt.DataTable(\r\n        rows=[\r\n            {'a': 1, 'b': 2},\r\n            {'a': 2, 'b': 3},\r\n        ],\r\n        columns=['a', 'b']),\r\n    html.Div('This is another tall div', style=dict(height=1000, width='100%')),\r\n])\r\n\r\n\r\nif __name__ == '__main__':\r\n    app.run_server()\r\n```\r\nRunning this app and loading/refreshing the page in a browser with a height noticeably less than 1000px causes the page to jump to the first cell in column 'a'. We've noted in other more complex instances that clicking on another cell in the table and then updating any other component causes the page to jump to the selected cell (with the blue highlighting).\r\n\r\n![image](https://user-images.githubusercontent.com/16123745/30829965-666e2dee-a210-11e7-9426-163f8a1d1256.png)\r\n\r\n### Misc.\r\nWithout having dug into the code (since we're just now getting into making our own custom Dash components), I would guess this may be an underlying React component issue(?).\r\nCertainly willing to help dig into this issue if needed since we'd love to use this component, but hopefully there's an easy, obvious fix!"},"comment":{"url":"https://api.github.com/repos/plotly/dash-table-experiments/issues/comments/437401503","html_url":"https://github.com/plotly/dash-table-experiments/issues/8#issuecomment-437401503","issue_url":"https://api.github.com/repos/plotly/dash-table-experiments/issues/8","id":437401503,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNzQwMTUwMw==","user":{"login":"HoustonJ2013","id":25359310,"node_id":"MDQ6VXNlcjI1MzU5MzEw","avatar_url":"https://avatars2.githubusercontent.com/u/25359310?v=4","gravatar_id":"","url":"https://api.github.com/users/HoustonJ2013","html_url":"https://github.com/HoustonJ2013","followers_url":"https://api.github.com/users/HoustonJ2013/followers","following_url":"https://api.github.com/users/HoustonJ2013/following{/other_user}","gists_url":"https://api.github.com/users/HoustonJ2013/gists{/gist_id}","starred_url":"https://api.github.com/users/HoustonJ2013/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HoustonJ2013/subscriptions","organizations_url":"https://api.github.com/users/HoustonJ2013/orgs","repos_url":"https://api.github.com/users/HoustonJ2013/repos","events_url":"https://api.github.com/users/HoustonJ2013/events{/privacy}","received_events_url":"https://api.github.com/users/HoustonJ2013/received_events","type":"User","site_admin":false},"created_at":"2018-11-09T15:50:37Z","updated_at":"2018-11-09T15:50:37Z","author_association":"NONE","body":"The editable table function is so powerful, but this bug is really annoying for app our users. "}}
{"actor":{"display_login":"HoustonJ2013"}}