[calcite-flow-item] does not have a back button if within a shadow root

[ethanbdev]

Actual Behavior

With showBackButton being internal and defaulting to false, by default a flow item within a shadow root is missing the back button, breaking the functionality of a flow item.

Expected Behavior

It should show a back button when it is the active flow item

Reproduction Sample

https://codepen.io/eborgen/pen/vYaygZy

Reproduction Steps

Observe that with a structure that puts a shadow root boundary between the calcite-flow and calcite-flow-item, the back button does not render.

Reproduction Version

next.707

Relevant Info

No response

Regression?

between beta.99 and next.707

Impact

High - it breaks the workflow unless I set an internal prop and ignore the type error

Esri team

ArcGIS Map Viewer

[geospatialem]

Could be related to the utilities used, will need a refactor in the component to mitigate without the use of the utility functions.

[jcfranco]

@ethanbdev I could be misinterpreting the issue, but from what I can recall, flow never supported flow-items within the shadow DOM of extraneous components. Can you update your codepen or provide one that shows this behavior?

[ethanbdev]

@ethanbdev I could be misinterpreting the issue, but from what I can recall, flow never supported flow-items within the shadow DOM of extraneous components. Can you update your codepen or provide one that shows this behavior?

That makes sense, I think we are not using the flow-item quite correctly. But with the removal of the showBackButton attribute it made it not work at all. It could be reasonable to have a tree structure like:

<calcite-flow>
  <my-custom-component>
    <calcite-flow-item />
  </my-custom-component>
</calcite-flow>

If that is not supported we can adjust the structure or consider a different component, like a panel with a slotted action in the header.

[geospatialem]

Allocating to the February release for further discussion.

[jcfranco]

@ethanbdev Gotcha. In the above structure snippet, is the item in the same light DOM tree as the flow? If so, I think that would work. I believe Map Viewer has some components structured similarly. @AdelheidF can you confirm?

[AdelheidF]

Yes, I use this in a few places, though with

shadow: false,
scoped: true

[ethanbdev]

@ethanbdev Gotcha. In the above structure snippet, is the item in the same light DOM tree as the flow? If so, I think that would work. I believe Map Viewer has some components structured similarly. @AdelheidF can you confirm?

It is not, all of our components utilize shadow: true

(I added show-back-button manually, ignoring the type error)