Skip to content

Removed usage of withStyles in Dialog component #236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 15, 2022

Conversation

rubenthoms
Copy link
Collaborator

Removed usage of withStyles in Dialog component in order to avoid conflicts with webviz-subsurface-components.

Both packages use MaterialUI v4 which again uses jss under the hood with its makeStyles / withStyles functions. jss automatically adds style nodes to the DOM containing CSS with auto-generated class names (e.g. jss1, jss2 etc.). However, since both packages did make use of the makeStyles function and both jss instances did not know of one another (and jss does not check for duplicates in the DOM when generating class names), class naming conflicts occured (e.g. the first dynamically created class in wcc would have the same name as the first in wsc - jss1). This lead to the jss1 class in wcc being applied to all elements in wsc with the same class name (and vice versa) and, hence, preventing pointer-events (since the only class added with jss in wcc was one preventing the background of the dialog accepting pointer-events in order to make the plugin behind the dialog remain clickable/usable when no backdrop was set).

This issue is temporarily fixed by removing the usage of withStyles in the Dialog component. However, the problem itself remains and might lead to further bugs that are difficult to debug. A general solution to this issue might be to upgrade to MaterialUI v5 which no longer uses jss but emotion. However, it is unknown if emotion has an implementation for checking for duplicates and works better than jss.

@rubenthoms rubenthoms self-assigned this Aug 12, 2022
@rubenthoms rubenthoms requested a review from jorgenherje August 12, 2022 09:55
@jorgenherje jorgenherje added the bug Something isn't working label Aug 12, 2022
Copy link
Collaborator

@jorgenherje jorgenherje left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! 👍

@rubenthoms
Copy link
Collaborator Author

rubenthoms commented Aug 12, 2022

Closes #236.

@rubenthoms rubenthoms merged commit adbe93f into equinor:master Aug 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: Done 🏁
Development

Successfully merging this pull request may close these issues.

2 participants