Using react-ace within react-bootstrap navigation tabs and resetting state

[lukaszczapiga]

Problem

I am trying to use multiple react-ace editors with react-bootstrap navigation tabs (e.g. JS editor + HTML editor). Each tab contains an AceEditor component. When I reset the value of the AceEditor (the value comes in as a prop and gets assigned to the local state of the component rendering the AceEditor) the state gets correctly updated but the editor only correctly updates the value of the visible editor and not the editor hidden in the second tab. It only updates the view of the hidden editor to the correct state once it's clicked on/focused.

Debugging it looks like correct value is passed down to both editors and the render method is called twice, on Reset when value changes to default and on Tab switch when value has not changed.

A hacky solution I think could solve this would be to toggle a prop on the ace editor on tab switch so that the editor sees a change to make it re-render.

Has anyone used react-ace with some sort of tabs and encountered this issue?

Any ideas how I could approach this problem ?

PS once the editors are outside of Tabs they work as expected (value reset works)

Thanks

Sample code to reproduce your issue

n/a

References

n/a
Progress on: #

[securingsincity]

@lukaszczapiga Is the react-bootstrap tab controlled or uncontrolled? I think your issue might be that the tab panel is trying to maintain its own state.

https://react-bootstrap.github.io/components.html#tabs How to do controlled and uncontrolled tabs in react-bootstrap.

[lukaszczapiga]

If I understood correctly, I changed the tabs to be controlled, are you suggesting I should force AceEditor re-render on tab switch? I think the issue is with Tabs making the render of the AceEditor not update DOM, so when the tab switches and AceEditor is eventually visible AceEditor doesn't re-render because it gets the same props as when Reset happened.

EDIT:
After quick debug, it might even be a deeper problem, as react-ace re-renders on tab switch, so it must be the pure ace editor that doesn't re-render on DOM when 'hidden' in a tab.

[securingsincity]

@lukaszczapiga do you mind sending me an example of the code in practice so I can test it locally?

[lukaszczapiga]

@securingsincity I will try to create an example over the weekend. For now I grabbed the editor instance from onLoad and call resize() on the editor instance on tab switch. Thanks for quick replies.

[securingsincity]

Cool, I'm glad you were able to find a temporary solution.

[ashking]

I've hit the same issue too. In my scenario, when I create a new tab containing ace editor all the existing tabs loses the content.

[collier]

Just started facing this same issue myself, and for whatever reason, even calling .resize() on tab switch doesn't work...

[collier]

Actually just found a workaround solution, thanks to issues listed below. Whenever the editor in a tab becomes visible, run the following, and it should work.

editor.resize();
editor.renderer.updateFull();

angular-ui/ui-ace#18
https://groups.google.com/forum/#!topic/ace-discuss/9oSvtlMuEqk

[pdubey84]

Is there a fix planned for this in the near future? 🤔

[securingsincity]

Hi all given it's been quite some time and no activity on this issue, I am closing it. Seems @collier 's example is working for others