kirbydesign / designsystem

Kirby Design System
https://cookbook.kirby.design
MIT License
82 stars 22 forks source link

[BUG] Range with pin gives "pinFormatter is not a function" error #3366

Closed RasmusKjeldgaard closed 5 months ago

RasmusKjeldgaard commented 5 months ago

Describe the bug

If the pin property of kirby-range is true, but no pinFormatter is supplied, a "pinFormatter is not a function" error occurs in some scenarios - for instance when showing the range in an outlet-based modal with multiple steps. Navigating away from a component with a range and back again will reproduce the bug.

It does not happen when the range is loaded the first time around, so it seems like some re-initialization issue, where ion-range is maybe hydrated before the pinFormatter binding is evaluted, and thus receives undefined somehow at a later time?

Describe how to reproduce the bug

The error can be provoked by explicitly setting the pinFormatter to undefined, and I assume something similar is happening in some cases during initialization of the component:

import { Component } from '@angular/core';

@Component({
  selector: 'cookbook-range-default-example',
  template: `
    <kirby-range [pin]="true" [pinFormatter]="pinFormatter"></kirby-range>
  `,
})
export class RangeDefaultExampleComponent {
  pinFormatter = () => {};

  constructor() {
    setTimeout(() => {
      this.pinFormatter = undefined;
    });
  }
}

Which Kirby version was used?

9.2.1

What was the expected behavior?

When pin is true but no pinFormatter is supplied the expected behavior is to just show the value in the pin.

Add any screenshots

image

Please complete the following information:

Are there any additional context?


Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

Implementation

The contributor who wants to implement this issue should:

Review

Once the issue has been implemented and is ready for review: