[MGNLUI-3845] CompositeField & NoOpCompositeTransformer & CKEditor field: text disappears upon blur Created: 11/Apr/16  Updated: 27/Oct/17  Resolved: 27/Oct/17

Status: Closed
Project: Magnolia UI
Component/s: dialogs
Affects Version/s: 5.4.5, 5.5, 5.5.1, 5.5.3
Fix Version/s: None

Type: Bug Priority: Neutral
Reporter: Mercedes Iruela Assignee: Evzen Fochr
Resolution: Outdated Votes: 1
Labels: support
Remaining Estimate: 0d
Time Spent: 1d
Original Estimate: Not Specified

Attachments: Text File requests_richText_NO_disappears.txt     Text File requests_richText_disappears.txt    
Issue Links:
Cloners
is cloned by MGNLUI-4309 CompositeField & NoOpCompositeTransfo... Closed
causality
relation
supersession
is superseded by MGNLUI-4187 Rich Text Editor - Source View : Does... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Sprint: Kromeriz 118, Kromeriz 119
Story Points: 5

 Description   

When a Richtext Field is defined as part of a Composite Field within a Multivalue Field, using as transformers:

info.magnolia.ui.form.field.transformer.composite.NoOpCompositeTransformer
info.magnolia.ui.form.field.transformer.multi.MultiValueSubChildrenNodePropertiesTransformer

The Richtext Field disappears from the dialog when it is filled and after that the user is filling other fields and focus is lost (see support ticket to see the steps to follow to reproduce the issue).

In Browser developer tools we can see in 'Network tab' the requests, and it seems to be related to information lost, because we can see a the following info:

"state":
{
	"323": {   "errorMessage":"<div>Text field headline: This&#32;field&#32;is&#32;required&#46;</div>\n"  },
	"341": {   "errorMessage":"<div>Text field headline: This&#32;field&#32;is&#32;required&#46;</div>\n"  },
	"344": {
			"hideErrors":false,
			"errorMessage":null
		}
}, 

Attached you can find the requests using NoOpCompositeTransformer and MultiValueSubChildrenNodePropertiesTransformer, when the error comes up: requests_richText_disappears.txt

And requests using DelegatingCompositeFieldTransformer and DelegatingMultiValueTransformer , no error:
requests_richText_NO_disappears.txt



 Comments   
Comment by Mercedes Iruela [ 11/Apr/16 ]

Data is correctly stored and if we open again the dialog all information is displayed.

Comment by Evzen Fochr [ 19/Oct/17 ]

One more possibility how to reproduce disappear is to remove all text from text field if already set some. On blur of textfield, ckeditor disappears too. To get it back it is enough to just switch tabs in dialog (it initialize ckeditor again with correct text). Seems to me like repainting of CompositeFieldDefinition is not done properly but only for ckeditor (doesn't matter if required is set to true or not).

But if ckeditor is not set as required it disappears everytime i set or remove text from textField.
If ckeditor is set as required it dissapear only if it contains content.

Comment by Aleksandr Pchelintcev [ 19/Oct/17 ]

fgrilli, efochr
Looks like I've managed to find the explanation to this: it the configuration you specified due to the required state and validation results, the framework may try to update the component captions.

Since the mentioned complex field lays out its children in a vertical layout - it is VerticalLayout's client-side who takes care of caption update. There's a class called Slot which eventually does client-side manipulations, and here's what happens:

Slot#setCaption(...) {
   if (caption == null) {
          ....
         captionWrap.addClassName("v-has-caption");
         getElement().appendChild(captionWrap);
         orphan(widget); <========== DETACHES CHILD WIDGET
         captionWrap.appendChild(widget.getElement()); 
         adopt(widget); <============ ADDS IT BACK
          ....
  } 
}

CKEditor's client-side field reacts on the orphan/detach call and destroys the editor. The re-attach event, however, is not handled so it seems. We could try to patch the CKEditor's client-side, but it still would be quite hard to restore the current state without a server round-trip.

Comment by Evzen Fochr [ 20/Oct/17 ]

Integrating to 5.6 blocked by code freeze

Comment by Roman Kovařík [ 24/Oct/17 ]

efochr Could you adjust the title/descr to reflect the real problem?

Comment by Federico Grilli [ 27/Oct/17 ]

Raising the version of Vaadin's CKEditor add-ons fixes the problem. Commits related to this issue were therefore reverted.

Generated at Mon Feb 12 09:10:39 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.