bug:

[will-hu-0]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.18.0

Current Behavior

We are using stencils to wrap Carbon card groups.

The internal @state() data is used to hold the data source. However, when updating the @state() data, it is found that the description values are not updated (item.name is updated):

<dds-card-group>
  {data.map(item => (
    <dds-card-group-item>
      <dds-card-heading>{item?.name}</dds-card-heading>
      <p>{item.description}</p> {/* item.description is NOT being updated when the data is updated */}
    </dds-card-group-item>
  ))}
</dds-card-group>

It can be reproduced easily from here: https://stackblitz.com/~/github.com/will-hu-0/carbon-card-stencil-issue

The gif indicates that the card name changes while the card description keeps the same.

Furthermore, the weird thing is that "removing the

" can resolve the issue. No idea what happened. Hope any one helps with this. Thanks.

Expected Behavior

The values from cards should be updated.

System Info

System: node 20.4.0
    Platform: darwin (23.4.0)
   CPU Model: Apple M1 Pro (8 cpus)
    Compiler: /Users/will/Documents/carbon-card-stencil-issue/node_modules/@stencil/core/compiler/stencil.js
       Build: 1715010794
     Stencil: 4.18.0 🍵
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.0

Steps to Reproduce

In the sample code readme file

Code Reproduction URL

https://github.com/will-hu-0/carbon-card-stencil-issue

Additional Information

No response

[alicewriteswrongs]

Hey @will-hu-0, thanks for reporting!

I was just able to confirm that this is a bug using the reproduction you supplied, thanks for taking the time to put that together.

I did find a quick workaround which you might be able to use to get this code working. I changed the <p> tag to include a key attribute based on the card description, like so:

          {this.dataForUI.map(card => {
            console.log(card);
            return <dds-card-group-item cta-type="local" href="https://example.com">
              <dds-card-heading>{card.heading}</dds-card-heading>
              <p key={card.description}>{card.description}</p> {/* This does NOT work */}
              {/* <div>{card.description}</div> This works */}
              <dds-card-cta-footer slot="footer"></dds-card-cta-footer>
            </dds-card-group-item>
          })}

here's a diff of it you could apply to the project:

diff --git a/src/components/my-component/my-component.tsx b/src/components/my-component/my-component.tsx
index d75f4d3..ffe894b 100644
--- a/src/components/my-component/my-component.tsx
+++ b/src/components/my-component/my-component.tsx
@@ -55,14 +55,15 @@ export class MyComponent {
           </dds-button-group-item>
         </dds-button-group>
         <dds-card-group grid-mode="narrow" cards-per-row="3">
-          {this.dataForUI.map(card => (
-            <dds-card-group-item cta-type="local" href="https://example.com">
+          {this.dataForUI.map(card => {
+            console.log(card);
+            return <dds-card-group-item cta-type="local" href="https://example.com">
               <dds-card-heading>{card.heading}</dds-card-heading>
-              <p>{card.description}</p> {/* This does NOT work */}
+              <p key={card.description}>{card.description}</p> {/* This does NOT work */}
               {/* <div>{card.description}</div> This works */}
               <dds-card-cta-footer slot="footer"></dds-card-cta-footer>
             </dds-card-group-item>
-          ))}
+          })}
         </dds-card-group>
       </div>
      </Host>

I'm going to label this so it gets ingested and the team will investigate and try to come up with a fix.

Thanks again for reporting!

[alicewriteswrongs]

Hey @will-hu-0 I've actually tried to reproduce this without the carbon components and I don't think I'm able to - if I make the following changes to the component in your reproduction case I don't see the issue anymore:

  render() {
    return (
    <Host>
      <button onClick={() => this.handleNext()}>
        Next
      </button>
      <div>
        {this.dataForUI.map(card => (
          <p>{card.description}</p>
        ))}
      </div>
     </Host>
    )
  }

Have you been able to reproduce the issue using only Stencil? We're not able to offer support for issues that crop up in third-party libraries unfortunately

[will-hu-0]

Hey @alicewriteswrongs Thanks for the quick response! I cannot reproduce it outside Carbon lib..I guess it's some bug weird that stencil plays with Carbon.

[alicewriteswrongs]

Alright, thanks for getting back! In that case I'm going to close this for now, feel free to open another issue if you do narrow the problem down to a Stencil-only reproduction case.

Thanks!

[Sukaato]

@will-hu-0 I can see that the issue is already closed, but I think it's important to clarify something.

The problem is that the key attribute is missing from the dds-card-group-item element.

The key is an important element in JSX, and must be unique to each element in the list (it's not advisable to use the index of an array).

[christian-bromann]

@Sukaato fwiw Stencil has an automatic key insertion capability but there might be situations where this doesn't work as expected. If you experience a situation like this and can create a reproducible example, we are happy to look into this.