Skip to content

[8.x] [React@18] `useLayoutEffect` when setting value from a prop in `react-monaco-editor` (#195775)#196671

Merged
kibanamachine merged 1 commit intoelastic:8.xfrom
kibanamachine:backport/8.x/pr-195775
Oct 17, 2024
Merged

[8.x] [React@18] `useLayoutEffect` when setting value from a prop in `react-monaco-editor` (#195775)#196671
kibanamachine merged 1 commit intoelastic:8.xfrom
kibanamachine:backport/8.x/pr-195775

Conversation

@kibanamachine
Copy link
Copy Markdown
Contributor

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

…-monaco-editor` (elastic#195775)

## Summary

This PR is part of
elastic/kibana-team#1016 (comment)
and needed to upgrade Kibana to React@18 in Legacy mode.

We've found a problem in `react-monaco-editor` component which is a very
thin wrapper around `monaco` where it doesn't play nicely with React@18
in legacy mode. You can read on details around the issue here
elastic/eui#8018 where we've found a similar
issue in EUI's search bar component. The workaround we've found is to
change `useEffect` -> `useLayouEffect` where the value that is coming
from the prop is set into the model. The issue and a fix might be a bit
controversal and the component is very thin, so I decided that it might
be better to bring the fork into Kibana with only what's needed and with
a workaround.

(cherry picked from commit dc3dda7)
@kibanamachine kibanamachine merged commit 4849b41 into elastic:8.x Oct 17, 2024
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Metrics [docs]

Unknown metric groups

ESLint disabled in files

id before after diff
@kbn/code-editor 0 1 +1

ESLint disabled line counts

id before after diff
@kbn/code-editor 3 5 +2

Total ESLint disabled count

id before after diff
@kbn/code-editor 3 6 +3

cc @Dosant

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants