Skip to content

Keyed Segmented Button breaks with keys of type number #700

@BonaFideIT0

Description

@BonaFideIT0

Describe the bug
When building a keyed segmented button, using number keys breaks the button.

To Reproduce

Create keyed segmented button with keys of type number that don't match the array index (i.e. offset by one):

[{key: 1, label: test1}, ...]

Expected behavior
Expected the button to work as intended.

Additional context

function selectSegment(indexOrSegmentId: any) {
    let index = segments.findIndex(
      (segment) => key(segment) === indexOrSegmentId,
    );
    if (index === -1) {
      index = indexOrSegmentId;
    }

This piece of code is called with the index of the segment but assumes the key never matches the index and determines if the argument is an index or key. The mismatched case breaks the whole element.

Temporary solution is to create a key like this: segment-${value}.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions