emdgroup-liquid / liquid

UI component library for the Liquid Design System of Merck KGaA, Darmstadt, Germany
https://liquid.emd.design/liquid/
Other
73 stars 10 forks source link

bug: empty breadcrumb trail breaks the application #532

Closed vabe closed 1 year ago

vabe commented 1 year ago

Prerequisites

Liquid version

@emdgroup-liquid/liquid@4.7.1

Framework bindings

React

Current behavior

Unpopulated <LdBreadcrumbs /> component shows an error message (TypeError: Cannot set properties of undefined (setting 'current')) using the React binding and results in a crash using NextJS.

Suspected root of the issue:

/* due to length === 0 this ends up being crumbs[-1] */
crumbs[crumbs.length - 1].current = true

Link to the code.

Expected behavior

Fail gently, and possibly show an error message in the console, similar to how some libraries (such as MSW) handle these. Added a small example warning message in the sandbox:

image

Steps to reproduce

  1. Set up a React-based project (or use the provided sandbox from the documentation)
  2. Update Liquid version to latest (@emdgroup-liquid/liquid@4.7.1)
  3. Import and combine the necessary components to build a breadcrumb trail
    import {
    LdBreadcrumbs,
    LdCrumb,
    } from '@emdgroup-liquid/liquid/dist/react'
  4. Add breadcrumbs to any page or component within the application as described in the documentation
  5. Remove the crumbs and leave the <LdBreadcrumbs /> empty

Code reproduction URL

https://stackblitz.com/edit/github-w4j4rt?file=pages/index.tsx

Additional information

The issue is present wherever the <ld-breadcrumbs> component is used, not specific to React, but has been found using a React-based framework.

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 4.7.6 :tada:

The release is available on:

Your semantic-release bot :package::rocket: