'dialog' selector

Hello again,

I’m wondering if this is using the ‘.dialog’ selector for the aem components.

I had an issue after installing SP1/SP2 in my AEM 6.1 servers. The React components disappears after editing (to be exact, their content disappears). This issue happen on the TouchUI edit window (editor.html). BTW, we’re using aem-react-0.4.0.

For example, I have a React text component. During editing, the editor calls the resource again with the ‘.dialog’ selector to rerender the content. In plain AEM 6.1 server, there is no ‘dialog’ selector being included, which works fine.

Sample url being called after edit is http://localhost:4502/content/test/home/jcr:content/structure/par/text_component.html?forceeditcontext=true&_=1489148319496 (no SP) and http://localhost:4502/content/test/home/jcr:content/structure/par/text_component.dialog.html?forceeditcontext=true&_=1489148319496 (SP1/SP2)

Rendered properly with .dialog selector

<div class="parbase text content">

	<div data-react-server="true" data-react="app" data-react-id="/content/test/home/jcr:content/structure/par/text_component">
		<span data-reactroot="" data-reactid="1" data-react-checksum="1190579901">
			<p data-reactid="2"><!-- react-text: 3 -->Sample text.<!-- /react-text --><br data-reactid="4"/><!-- react-text: 5 -->
			<!-- /react-text --></p><!-- react-text: 6 -->
			<!-- /react-text -->
		</span>
	</div>

<textarea id="/content/test/home/jcr:content/structure/par/text_component" style="display:none;">{&quot;cache&quot;:... other contents...}</textarea>
<cq data-path="/content/test/home/jcr:content/structure/par/text_component" data-config="{...}"></cq>
</div>

This is the source output with the ‘dialog’ selector

<div class="parbase text content">

<cq data-path="/content/test/home/jcr:content/structure/par/text_component" data-config="{....}"></cq>
</div>

[stemey]

I understand the problem now. I will look into a fix. Here are the two pieces of code that need to be changed:

https://github.com/sinnerschrader/aem-react/blob/master/core/src/main/java/com/sinnerschrader/aem/react/ReactScriptEngine.java#L90

https://github.com/sinnerschrader/aem-react/blob/master/core/src/main/java/com/sinnerschrader/aem/react/api/Sling.java#L263

I will look into a different mechanism to render the wrapper element only.

[stemey]

to get the wrapper element from AEM a request is dispatched to the component. In this request only the wrapper is rendered and the ReactScriptEngine renders nothing. To distinguish these two cases we used a dialog selector before and now we just set a request attribute. The request attribute is set to its old value in the above code snippet. That’s it.