Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

calcite-card does not properly handle dynamically added footer slot content #10152

Closed
2 of 6 tasks
mjuniper opened this issue Aug 23, 2024 · 4 comments
Closed
2 of 6 tasks
Assignees
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Hub Issues logged by ArcGIS Hub team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality

Comments

@mjuniper
Copy link
Member

mjuniper commented Aug 23, 2024

Check existing issues

Actual Behavior

Dynamically added footer slots do not render.

Expected Behavior

Dynamically added footer slots like <div slot="footer-end"> will render.

Reproduction Sample

I think this can only be reproduced by creating a stencil component that uses calcite-card. I could probably do this in React Codesandbox but I don't know react well enough.

Reproduction Steps

Create a component like this:

import { Component, Host, State, VNode, h } from '@stencil/core';

@Component({
  tag: 'parent-component',
  // styleUrl: 'parent-component.css',
  shadow: true,
})
export class ParentComponent {

  // The button works as expected, toggling the slot on and off
  // But _only_ if the initial value of showSlot is true
  @State() showSlot = false;

  maybeRenderSlot(slotName): VNode {
    if (this.showSlot) {
      return <div slot={slotName}>foobar</div>;
    }
  }

  render() {
    return (
      <Host data-element="parent-component">
        This is the parent component
        <calcite-button onClick={_ => this.showSlot = !this.showSlot}>Toggle Slot</calcite-button>
        {/* slotted component is just a very simple stencil component with a named slot
            to try to determine if the problem is specific to calcite-card
            slotted component works as expected
        <slotted-component>
          {this.maybeRenderSlot("main")}
        </slotted-component> */}
        <calcite-card>
          WAT
          {/* <div slot="footer-start">foo</div> */}
          {this.maybeRenderSlot("footer-end")}
        </calcite-card>
      </Host>
    );
  }
}

Then run the samples and observe that the calcite-button in the component works when the initial value of showSlot is true but not when the initial value of showSlot is false.

Reproduction Version

2.11

Relevant Info

I think this can be fixed by doing something like this in calcite-card:

@State() hasFooterStart = false;

@State() hasFooterEnd = false;

get hasFooter(): boolean {
  return this.hasFooterStart || this.hasFooterEnd;
}

private handleFooterStartSlotChange = (event: Event): void => {
  this.hasFooterStart = slotChangeHasAssignedElement(event);
};

private handleFooterEndSlotChange = (event: Event): void => {
  this.hasFooterEnd = slotChangeHasAssignedElement(event);
};

private renderFooter(): VNode {
  const { hasFooter } = this;
  return (
    <footer class={CSS.footer} hidden={!hasFooter}>
      <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
      <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
    </footer>
  );
}

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

I causes one of the components we commonly use on customer sites to not work properly.

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Hub

@mjuniper mjuniper added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Aug 23, 2024
@github-actions github-actions bot added ArcGIS Hub Issues logged by ArcGIS Hub team members. calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Aug 23, 2024
@geospatialem
Copy link
Member

Will need to address #6059 to mitigate.

@geospatialem geospatialem added this to the 2024-10-29 - Oct Release milestone Sep 3, 2024
@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality estimate - 3 A day or two of work, likely requires updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels Sep 3, 2024
@rweber-esri
Copy link

rweber-esri commented Sep 23, 2024

I'm observing the same issue on 2.12.1 even when we immediately slot content into calcite-card's footer-start & footer-end slots. When I inspect the DOM using Chrome Dev Tools, I can see the content is being passed into the slot, but it's not visible to the user. FWIW, we (Hub) are rendering the calcite-card by other Stencil components (JSX) we internally develop/maintain that are lazy loaded, which could be related (maybe a render race condition related to the async loading that results in similar observations as if we had dynamically rendered the content into the slot?). What's strange is that other slots in this component that also use the getSlotted pattern (e.g. slot="title") seem to work in my use case.

2024-09-23_10-30-40 (1)

Adding a JSX key to the elements with the slot="footer-start|footer-end" attributes doesn't seem to help.

This might be something worth prioritizing sooner rather than later, if possible.

@driskull driskull self-assigned this Sep 23, 2024
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Sep 23, 2024
driskull added a commit that referenced this issue Sep 24, 2024
**Related Issue:** #10152 #6059

## Summary

- remove use of `getSlotted` utility
- replace with `slotchange` event and `@State` variables to update the
display of elements.
- existing tests should suffice
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Sep 24, 2024
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Sep 24, 2024

🍭 Verified locally on dev with code from provided repro case. Footer slotted content now shows up when showSlot is defaulted to false in repro example.

Screen.Recording.2024-09-24.at.1.07.24.PM.mov

@DitwanP DitwanP closed this as completed Sep 24, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Hub Issues logged by ArcGIS Hub team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Development

No branches or pull requests

5 participants