search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.76k stars 8.15k forks source link

[TableListView] Letters are skipped when typing fast #193879

Open Dosant opened 4 days ago

Dosant commented 4 days ago

While working on the React@18 upgrade I was troubleshooting an issue with TableListView. The upgrade highlighted problems with state management of the query that also applies in React@17.

If you type fast, letters might be skipped (for some reason usually spaces):

https://github.com/user-attachments/assets/1c6ff358-1f81-4802-8afe-25a1490ff9d7

The bug seems to happen only when URL state syncing is enabled and I assume is caused by this useEffect:

https://github.com/elastic/kibana/blob/89534228550b72312a8433d840f5cb3488346e0f/packages/content-management/table_list_view_table/src/table_list_view_table.tsx#L1027-L1081

This useEffect makes the controlled input async and breaks the connection between state.query and the input.value. Changes in the timing could make the problem more prominent, which is what happening with an upgrade to React@18

Before upgrading to React@18, we would need to either refactor this feature or disable the URL state synching

elasticmachine commented 4 days ago

Pinging @elastic/appex-sharedux (Team:SharedUX)