[BUG] Segmented control does not scroll to active chip

[troelslenda]

• [x] I have written a good issue

Describe the bug

With the following initial conditions, the active list item is not visible.

1. Segmented control has more content than visible in a narrow viewport.
2. The last element is the active one.

See enclosed screenshot

## Describe how to reproduce the bug 1. Apply this patch to cookbook:develop 3. Set the window size to 400px ```diff diff --git a/apps/cookbook/src/app/examples/segmented-control-example/default/default.ts b/apps/cookbook/src/app/examples/segmented-control-example/default/default.ts index 42002520b..d4c5937cb 100644 --- a/apps/cookbook/src/app/examples/segmented-control-example/default/default.ts +++ b/apps/cookbook/src/app/examples/segmented-control-example/default/default.ts @@ -8,6 +8,7 @@ const config = { [value]="selectedSegment" [mode]="mode" [size]="size" + [selectedIndex]="7" (segmentSelect)="onSegmentSelect($event)" > @@ -96,7 +97,7 @@ export class SegmentedControlExampleDefaultComponent implements OnInit { } codeSnippet = config.codeSnippet; - mode: SegmentedControlMode = SegmentedControlMode.default; + mode: SegmentedControlMode = SegmentedControlMode.compactChip; private _size: 'sm' | 'md' = 'md'; get size(): 'sm' | 'md' { ```

Which Kirby version was used?

9.0.0 / develop

## What was the expected behavior? That the list scrolls to show the last element as is does when clicked, like on second screenshot.

Add any screenshots

Please complete the following information:

• OS: MacOS
• Browser: Vivaldi
• Browser version: 6.5

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.

• [ ] Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done

Implementation

The contributor who wants to implement this issue should:

• [ ] Make sure you have read: "Before you get coding".
• [ ] Signal to others you are working on the issue by assigning yourself.
• [ ] Create a branch from the develop branch following our branch naming convention.
• [ ] Create a test that reproduces the bug following guidelines in: "The good: Test".
• [ ] Write code to fix the bug

Review

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

• [ ] Do a self-review.
• [ ] Create a pull-request.

[RasmusKjeldgaard]

Is it your experience that is has worked like this before? It is useful to know if this is a regression or always has been like this, and I am not sure which it is.

[troelslenda]

I've tried the patch on v8.11.2 with no difference. It does not look like regression or in anyway related to v9.0.0 The issue was randomly discovered in a recent bughunt.