dequelabs / dequelabs/cauldron

Bug: components that map children (eg `Breadcrumb`) break when using a fragment

Open
#844 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

### Steps to reproduce

## Steps to reproduce

Introduce a fragment into the `Breadcrumb`.

A minimal, contrived example:

```

<>

Item One


Item Two



```

## Use case

This was encountered when trying to conditionally display breadcrumbs, where one branch of the operation required a fragment to wrap two breadcrumbs.

## Possible workarounds

Working around this issue now by wrapping both individual breadcrumb items in their own conditional so there is never a fragment.

### Expected Behavior

Renders two `

  • ` items.

    ### Actual Behavior

    Renders a single `

  • ` with two items inside. This has the effect of removing the separator between the breadcrumbs.

    ```




    ```

    ### Version

    4.7.0

    ### What browsers are you experiencing the problem on?

    Firefox

    ### Relevant log output

    _No response_

    ### Anything else we should know?

    Additional information

    Jason did some initial looking and found that this could impact several components, and is related to https://github.com/reactjs/rfcs/pull/61

  • Contributor guide

    Open the contributing guide

    Research direction

    Start by locating the Breadcrumb implementation and the other components that map children, then reproduce the fragment example from the issue in Firefox. The fix is done when the example renders two separate

  • items with the breadcrumb separator preserved, rather than one
  • containing both items.
  • Written by the indexing model from the issue text.

    Assessment

    Tech stack
    react, typescript
    Domain
    frontend
    Issue type
    Bug
    Difficulty
    3/5
    Estimated time
    1-2 days
    Activity status
    Stale
    Clarity
    Mostly clear
    Newbie friendliness
    38/100

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.