From 4b57650dabaada79acf4aca876a478adbd4aaece Mon Sep 17 00:00:00 2001
From: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Date: Tue, 22 Oct 2024 11:25:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(segment):=20improve=20vertic?=
 =?UTF-8?q?al=20rendering=20for=20the=20initial=20render=20(#1486)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(segment): improve vertical rendering for the initial render

* fix(segment): triggers change when selecting with space or enter key

* fix(segement): get inital veritcal value
---
 .changeset/cool-buckets-smell.md                          | 5 +++++
 .changeset/rare-bags-visit.md                             | 5 +++++
 .../bal-segment/bal-segment-item/bal-segment-item.tsx     | 7 +++++++
 packages/core/src/components/bal-segment/bal-segment.tsx  | 8 ++++++--
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/cool-buckets-smell.md
 create mode 100644 .changeset/rare-bags-visit.md

diff --git a/.changeset/cool-buckets-smell.md b/.changeset/cool-buckets-smell.md
new file mode 100644
index 000000000..9c8105b41
--- /dev/null
+++ b/.changeset/cool-buckets-smell.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**segment**: triggers change when selecting with space or enter key
diff --git a/.changeset/rare-bags-visit.md b/.changeset/rare-bags-visit.md
new file mode 100644
index 000000000..f13b99cfc
--- /dev/null
+++ b/.changeset/rare-bags-visit.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**segment**: improve vertical rendering for the initial render
diff --git a/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.tsx b/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.tsx
index af76ca111..5fe63df4d 100644
--- a/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.tsx
+++ b/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.tsx
@@ -72,6 +72,13 @@ export class SegmentItem implements ComponentInterface {
     }
   }
 
+  connectedCallback(): void {
+    const segmentEl = (this.segmentEl = this.el.closest('bal-segment'))
+    if (segmentEl && segmentEl.vertical) {
+      this.isVertical = segmentEl.vertical
+    }
+  }
+
   componentDidLoad() {
     const segmentEl = (this.segmentEl = this.el.closest('bal-segment'))
     if (segmentEl) {
diff --git a/packages/core/src/components/bal-segment/bal-segment.tsx b/packages/core/src/components/bal-segment/bal-segment.tsx
index a69de21e4..1850f4acb 100644
--- a/packages/core/src/components/bal-segment/bal-segment.tsx
+++ b/packages/core/src/components/bal-segment/bal-segment.tsx
@@ -24,6 +24,7 @@ import {
   isEndKey,
   isArrowLeftKey,
   isArrowRightKey,
+  isEnterKey,
 } from '@baloise/web-app-utils'
 import { stopEventBubbling } from '../../utils/form-input'
 import { FOCUS_KEYS } from '../../utils/focus-visible'
@@ -143,6 +144,7 @@ export class Segment implements ComponentInterface, BalWindowResizeObserver, Bal
     this.el.addEventListener('touchstart', this.onPointerDown)
     this.el.addEventListener('mousedown', this.onPointerDown)
     this.disabledChanged()
+    this.isVertical = this.vertical
   }
 
   disconnectedCallback() {
@@ -204,12 +206,14 @@ export class Segment implements ComponentInterface, BalWindowResizeObserver, Bal
   @Listen('keydown')
   listenOnKeyDown(ev: KeyboardEvent) {
     this.keyboardMode = FOCUS_KEYS.includes(ev.key)
+    let forceChange = false
 
     let current: undefined | HTMLBalSegmentItemElement
 
-    if (isSpaceKey(ev)) {
+    if (isSpaceKey(ev) || isEnterKey(ev)) {
       stopEventBubbling(ev)
       current = this.getSegmentItem('current')
+      forceChange = this.value !== current.value
       this.value = current.value
     } else if (isArrowUpKey(ev) || isArrowLeftKey(ev)) {
       stopEventBubbling(ev)
@@ -230,7 +234,7 @@ export class Segment implements ComponentInterface, BalWindowResizeObserver, Bal
     }
 
     const previous = this.checked
-    if (current !== previous) {
+    if (current !== previous || forceChange) {
       this.checkButton(previous, current)
       this.emitValueChange()
     }