[Teaser] When a teaser is linked to a page the incorrect information is displayed for the title and description

[aldesouza]

Bug Report

Apologies if this is already been reported, but, I couldn't find on the opened bugs. This issue has been picked up for one of our clients when configuring multiple teasers in a single page. It also very simple to reproduce the error using the sample page create by the archetype which contains 3 teaser side by side.

Steps to reproduce:

1. Create a sample project using the latest AEM archetype
2. Create 3 new pages under the us/en with 3 distinctive titles such Teaser 1, Teaser 2, Teaser3 (provide a description is a bonus)
3. Edit the 3 teaser in the sample home page to point at those pages by using the link field at the Links tab
4. Refresh the page
5. Open the first teaser and check the Text tab the title or description will not be the ones belong to the linked page.

Current Behavior

If you open the teaser just after the page is refreshed you will notice that information displayed in the Text tab will be related to the current page instead of the linked page. And then if you close it and click in the next teaser, the information displayed will be from the previous teaser instead of the linked teaser, something like:

1. Refresh the page
2. Open teaser 1 - the Text info will be related to current page.
3. Close teaser 1 and open teaser 2 - the Text info will be related to the teaser 1.

That happens because in the FE code, the variable that holds the link linkURL seems to be initialised in the incorrect place.

The outcome of that is when you open the teaser after a page refresh linkURL will be undefined and the teaser will behave as no link is provided. However, if you keep alternating between teasers in the page, linkURL will hold the value of the previous teaser you opened not the current one.

This issue only affects the info in the dialogue, the component itself will be rendered with the correct information.

Expected behavior/code The expected behaviour would be we always see the correct information in the dialogue regardless if its setup on the teaser or coming from a linked page.

Important to note, that if you link pages via CTA option it works fine as expected.

Environment

• AEM version: 2023.9.13665.20230927T063259Z-230800
• Core Components version 2.23.0
• JRE version jdk-11.0.16.1

Possible Solution It seems that if we just move retrievePageInfo($dialogContent) under function init(e, $dialog, $dialogContent, dialogContent) from line 65 from below the $linkURLField logic should solve the problem something like:

    var $linkURLField = $dialogContent.find(linkURLSelector);
    if ($linkURLField.length) {
        linkURL = $linkURLField.adaptTo("foundation-field").getValue();
        $linkURLField.on("change", function() {
            linkURL = $linkURLField.adaptTo("foundation-field").getValue();
            retrievePageInfo($dialogContent);
        });
    }
    retrievePageInfo($dialogContent);

Additional context / Screenshots

[HitmanInWis]

I'm going to guess the bug I am seeing today is similar but instead of seeing the Title/Description of the current page on load of the Teaser Dialog, I instead see the information from the first item in the Actions list.

So I have a Teaser with:

• Link to Page 1
• Action Link to Page 2

When I open the dialog the first time I see the Title/Description for Page 2. If I close and open again, I see the Title/Description for Page 1.

[HitmanInWis]

@aldesouza confirmed that your recommended JS update fixes my issues as well.