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() }