[React] Text component value is not updated if first do inline-editing and then use dialog to edit

[habansal]

Local Environment
Before filing an issue, verify that the prerequisite tools/software are installed:

• AEM 6.4 + SP2
• Java 1.8
• Apache Maven (3.3.9 or newer)
• Node.js v10+
• npm 6+

Describe the issue
First Inline-editing and then using Dialog to edit Text component doesn't show changes on the page, unless reloaded.

Where in the tutorial are you experiencing an issue?

After completing all chapters and playing with the Authoring ->

1. Open page /editor.html/content/wknd-events/react/home.html
2. Navigate to a text component and edit value in inline mode (e.g. 'TestText')
3. Value is TestText
4. Open configuration dialog - there will be 'TestText' value in richtext editor on TEXT tab
5. Edit value (e.g. set 'Test')
6. Apply changes

E.R. Text component value set to 'Test'
A.R. Text component value remains same as before editing, however after page reload it would change to edited value.

Additional context
See these PRs for more context -
https://github.com/adobe/aem-sample-we-retail-journal/pull/16/files
https://github.com/adobe/aem-spa-project-archetype/pull/19/files

These were solved (after much discussion) via a RTE configuration editElementQuery.
Hence, we should also use the similar fix, as in above PRs, in this project.

A similar issue and fix also needs to be done for the Angular tutorial here.

cc @godanny86

[godanny86]

hi @habansal does this fix require a particular version of AEM?

[habansal]

@godanny86 This config editElementQuery works at least since AEM 6.3 and above.
So, I can say that in the context of SPA Editor, this fix should work for all supported AEM versions