appsmith icon indicating copy to clipboard operation
appsmith copied to clipboard

Published 20 hours ago • verified publisher icon appsmithorg

[Task]: Upgrade React version from 16 to 17

Open rohitagarwal88 opened this issue 2 years ago • 5 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Subtask

  • Map widget is not working, dragging and dropping a map widget does not work.
  • Not able to drag and select the widget inside modal widget.
  • The dropdown in MultiSelect, TreeSelect & MultiTreeSelect widgets does not open appropriately.
  • With react 17 we have some breaking changes in the way in which react handles dom events. And all the above issues were caused due to the onClickCapture that we are using in several places.

rohitagarwal88 avatar Aug 24 '22 05:08 rohitagarwal88

I did an initial investigation,

  • I found the issue with modal drag to select and fixed it,

  • map widget library react-google-maps doesn't seem to support react 17 its SearchBox widget that we use fails to render in react 17, the library last gave an update for react 16 for the same problem. its best if we ditch this library and use a new one its 5 years old and is not active.

  • the select widget works weird on prod as well, selecting the widget and then clicking on it sometimes deselects the widget in previous and this version of react, this is because of the combination of our keyboard navigation on the property pane that we kick off when a widget is selected vs the select widgets own keyboard navigation support. This is a hunch based on how the widget behaves but needs more investigation coz its a third party widget.

cc: @rohitagarwal88 @yaldram @Tooluloope

marks0351 avatar Sep 05 '22 11:09 marks0351

@marks0351 : We should update to a new maps library like google-map-react that supports React 18. The current library's ( react-google-maps) last version was released in 2018, restricting us to use the latest google maps feature.

cc @yaldram @Tooluloope

rohitagarwal88 avatar Sep 06 '22 04:09 rohitagarwal88

@marks0351 / @yaldram : updating the google map library should not break our existing apps. Need to approach holistically.

rohitagarwal88 avatar Sep 09 '22 06:09 rohitagarwal88

https://www.npmjs.com/package/@react-google-maps/api

The above library is a fork of the original react-google-maps, which is very well maintained. I think we can use the above library.

yaldram avatar Sep 21 '22 08:09 yaldram

Created new issues

  • #16948 Needs more clarity, dont exactly know what is wrong right now
  • #16946 Picking up right now

cc @rohitagarwal88

somangshu avatar Sep 21 '22 10:09 somangshu