future-architect / cheetah-grid

The fastest open-source data table for web.
https://future-architect.github.io/cheetah-grid/
MIT License
1.46k stars 117 forks source link

Cell selection behaves strangely in iOS 16 #384

Open ootsuka-biz opened 2 years ago

ootsuka-biz commented 2 years ago

I noticed a strange behavior when touching the same grid in iOS 15 and iOS 16.

It only happens when the page is displayed and a cell is selected for the first time. When scrolling through the grid and selecting a cell, the cell at the top of the grid is selected.

https://future-architect.github.io/cheetah-grid/documents/api/js/events.html

I checked the event behavior on the above page, and it appears that the selected_cell event is being executed twice. (When the 14th row is selected, the event is running as follows)

Event: selected_cell , args ({"col":0,"row":0,"selected":false,"after":{"col":0,"row":14}}, false) Event: selected_cell , args ({"col":0,"row":14,"selected":true,"before":{"col":0,"row":0}}, true) Event: scroll , args ({"event":{"isTrusted":true}}) Event: mousedown_cell , args ({"col":0,"row":3,"event":{"isTrusted":true}}) Event: selected_cell , args ({"col":0,"row":14,"selected":false,"after":{"col":0,"row":3}}, false) Event: selected_cell , args ({"col":0,"row":3,"selected":true,"before":{"col":0,"row":14}}, true) Event: mouseup_cell , args ({"col":0,"row":3,"event":{"isTrusted":true}}) Event: changed_value , args ({"col":0,"row":3,"record":{"personid":3,"fname":"Allison","lname":"Myers","email":"allison_myers@example.com","birthday":"2002-07-23T15:00:00.000Z","check":true},"field":"check","value":true}) Event: click_cell , args ({"col":0,"row":3,"event":{"isTrusted":true}})

ota-meshi commented 2 years ago

Thank you for reporting the issue. I don't have iOS so it's hard to reproduce. If you have identified the cause of the bug, please consider opening a PR.

ootsuka-biz commented 2 years ago

I found a temporary solution. It seems to work correctly by focusing any cell with focusCell() beforehand.

Example for Vue. After loading data into the grid, call focusCell().

const vm = this vm.$nextTick(() => { vm.$refs.cGrid.rawGrid.focusCell(1,1) })

(I am sorry. I accidentally closed the issue.)