Potential React and jQuery conflict when removing component views #508
Description
Subject of the issue/enhancement/features
If the _vanilla theme object is applied to a component model, a background div will be added to the component (regardless of whether _backgroundImage is configured). If applied to a component using React templates, this produces the following error when attempting to remove the view:
react-dom.development.js:61 Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.
The theme object is applied as default when using the AAT.
This is presumably because jQuery is being used to manipulate the DOM since 1a8a9b6, causing an issue with React when it attempts to unmount.
As this only currently occurs for component because other views are still using Handlebars, it will have been introduced with the themeComponentView addition in a13e2f0#diff-84cd82bc77528fe71fd5802fc8120448ee0b922be0ff695a14a9bd29751033df. Previously the theme wasn't applied to component views.
The error doesn't occur if the background is removed in onRemove(), before AdaptView.remove calls unmountComponentAtNode.
The error also only occurs when compiling via grunt dev. grunt build; rub dev; rub build; don't produce the error.
First thing to consider before a fix is applied, is whether a component view should even apply a background? It isn't part of https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/schema/component.schema.json and has-bg-image class is not configured in https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/less/core/component.less as per page, article and block, so currently this won't get displayed anyway.
Your environment
- since 5.22.11