Conditionally setting className removes ace-editor class

[HaleyWardo]

Problem

When I am conditionally setting the className prop for an error - the editor position changes and breaks the UI.

For example: I set a className for an error. Once there is no longer an error, I am passing in an empty string. When inspecting the DOM, I noticed that the ace-editor class is getting removed.

After looking at the source code, I found this section which I believe is the culprit. If I am reading it correctly, I believe if there was a previous class name and the new class name is falsy, it would remove one of the libraries set class names (ace-editor).

Sample code to reproduce your issue

Conditional className prop:

className={error ? classes.error : ""}

Steps on how I am able to get this issue:

• Type in editor (starts with no className)
• Submit w/ error (updates className to error)
• Type more in editor (updates className to "")
• Submit w/ another error (updates className to error)

[jamgregory]

I've also just started encountering this issue since upgrading to Bootstrap 5, as we need the is-invalid class adding to the editor to correctly display the errors (in our case, it's removing the ace-tm class)

I suspect (although I've not dug into it) that it's this bit of code that is causing the issue: https://github.com/securingsincity/react-ace/blob/v9.5.0/src/ace.tsx#L334

Does anyone know how to fix this issue?