Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

AEM 6.3 - RTE and Numberfield compatibility error in 6.3

Avatar

Level 1

Hello,

The site I work on was recently upgraded from 6.2 to 6.3. We have several components that utilize a RTE in a dialog, and after the upgrade, one component dialog in particular was throwing a JS error upon being opened, and we were unable to switch between tabs/use the RTE. The error is:

Uncaught TypeError: Cannot read property 'sourceEditMode' of undefined

    at Object.validate (all.js:2663)

    at HTMLValidation.<anonymous> (foundation.js:1495)

    at everyReverse (foundation.js:206)

    at HTMLValidation.checkValidity (foundation.js:1488)

    at foundation.js:1883

    at Array.every (<anonymous>)

    at Object.isValid (foundation.js:1876)

    at enable (foundation.js:1030)

    at HTMLDivElement.<anonymous> (foundation.js:1038)

    at HTMLDocument.dispatch (jquery.js:5226)

However, other components using the same RTE in a dialog were not throwing this error. I narrowed this down to a compatibility issue with the RTE and this version of the numberfield widget:

granite/ui/components/foundation/form/numberfield

Removing the numberfield with this sling:resourceType allows the component dialog to work, or, leaving the numberfield and deleting the RTE allows the dialog to work as well.

I tested this out in a fresh 6.3 instance in the We.Retail site. I installed this text component, which has the RTE in the dialog as well, from the adobe article:

https://helpx.adobe.com/experience-manager/using/touchUI_RTE_configure.html

and included the numberfield with the sling:resourceType in question, which breaks the dialog and throws the same JS error I saw in my site:

broken.jpg

I noticed a different numberfield in various We.Retail components, so tried updating the sling:resourceType of the numberfield in my broken component, and this actually works:

working.jpg

The working numberfield has a sling:resourceType of granite/ui/components/coral/foundation/form/numberfield.

So I'm wondering if anyone else can re-create this, or explain why there is a compatibility issue? We have a mixture of widgets in our dialogs, that utilize both granite/ui/components/coral/foundation/form and granite/ui/components/foundation/form widgets, that don't have errors.

Sarah

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

I didn't find any document on this but though I know by heart coral2 datepicker, multifield pathbrowser also don't work properly.

I'll suggest from now onwards you can start using latest components, which is coral3/granite.

View solution in original post

5 Replies

Avatar

Community Advisor

Hi Sarah,

we have two set of coral components for touch UI.

Coral2 - granite/ui/components/foundation/form/numberfield

Coral3/Granite - granite/ui/components/coral/foundation/form/numberfield

Coral3/Granite is recommended to use. Coral3 is upgrade of Coral2.

Welcome to Granite UI’s documentation! — Granite UI 1.0 documentation

Thanks

Arun

Avatar

Level 1

Thanks Arun. Is there any documentation on what coral2 components will not work with coral3 components? We have other coral2 components in the same dialog tab (like granite/ui/components/foundation/form/radiogroup), and those do not cause this error; only the coral2 numberfield causes the issue.

Avatar

Correct answer by
Community Advisor

Hi,

I didn't find any document on this but though I know by heart coral2 datepicker, multifield pathbrowser also don't work properly.

I'll suggest from now onwards you can start using latest components, which is coral3/granite.