fix(segmented-button): refactored event handler and adjusted code by merge request comments

Author: glebbo-dev

packages/components/src/components/segment/readme.md

@@ -20,7 +20,7 @@
 | `position`                   | `position`                     | (optional) position within group                                                                                                                       | `number`                           | `undefined`        |
 | `segmentId`                  | `segment-id`                   | (optional) segment's id                                                                                                                                | `string`                           | `'segment-' + i++` |
 | `selected`                   | `selected`                     | (optional) If `true`, the segment is selected                                                                                                          | `boolean`                          | `false`            |
-| `selectedIndex`              | `selected-index`               | (optional) the index of the currently selected segment in the segmented-button                                                                         | `string`                           | `undefined`        |
+| `selectedIndex`              | `selected-index`               | (optional) the index of the currently selected segment in the segmented-button                                                                         | `number`                           | `undefined`        |
 | `size`                       | `size`                         | (optional) The size of the segment                                                                                                                     | `"large" \| "medium" \| "small"`   | `'small'`          |
 | `styles`                     | `styles`                       | (optional) Injected CSS styles                                                                                                                         | `string`                           | `undefined`        |
 | `textOnly`                   | `text-only`                    | (optional) position within group                                                                                                                       | `boolean`                          | `undefined`        |

packages/components/src/components/segment/segment.tsx

@@ -66,15 +66,13 @@ export class Segment {
   /** (optional) position within group */
   @Prop({ mutable: true }) iconOnly?: boolean;
   /** (optional) the index of the currently selected segment in the segmented-button */
-  @Prop({ mutable: true }) selectedIndex?: string;
+  @Prop({ mutable: true }) selectedIndex?: number;
 
   /** Emitted when button is clicked */
   @Event({ eventName: 'scale-click' }) scaleClick!: EventEmitter<{
     id: string;
     selected: boolean;
   }>;
-  /** Emitted when selection has been changed. */
-  @Event({ eventName: 'scaleSelectionChanged' }) scaleSelectionChanged!: EventEmitter;
   /** @deprecated in v3 in favor of kebab-case event names */
   @Event({ eventName: 'scaleClick' }) scaleClickLegacy!: EventEmitter<{
     id: string;
@@ -85,7 +83,13 @@ export class Segment {
 
   @Watch('selected')
   selectionChanged() {
-    emitEvent(this, 'scaleSelectionChanged');
+    if (this.selectedIndex !== -1 && !this.selected) {
+      return;
+    }
+    emitEvent(this, 'scaleClick', {
+      id: this.segmentId,
+      selected: this.selected,
+    });
   }
 
   @Method()
@@ -158,15 +162,11 @@ export class Segment {
   }
 
   handleClick = (event: MouseEvent) => {
-    if (parseInt(this.selectedIndex, 10) + 1 === this.position) {
+    if (this.selectedIndex === this.position) {
       return;
     }
     event.preventDefault();
     this.selected = !this.selected;
-    emitEvent(this, 'scaleClick', {
-      id: this.segmentId,
-      selected: this.selected,
-    });
   };
 
   render() {

packages/components/src/components/segmented-button/segmented-button.tsx

@@ -79,35 +79,30 @@ export class SegmentedButton {
   showHelperText = false;
   @Listen('scaleClick')
   scaleClickHandler(ev: { detail: { id: string; selected: boolean } }) {
-    let tempState: SegmentStatus[];
+    if (this.status.length === 0) {
+      return;
+    }
+    let tempState = this.getAllSegments().map((segment) => {
+      return {
+        id: segment.getAttribute('segment-id') || segment.segmentId,
+        selected:
+          segment.hasAttribute('selected') && segment.selected ? true : false,
+      };
+    });
     if (!this.multiSelect) {
       if (!ev.detail.selected) {
-        tempState = this.status.map((obj) =>
+        tempState = tempState.map((obj) =>
           ev.detail.id === obj.id ? ev.detail : { ...obj }
         );
-        /* clicked button has now selected state */
       } else {
-        tempState = this.status.map((obj) =>
+        tempState = tempState.map((obj) =>
           ev.detail.id === obj.id ? ev.detail : { ...obj, selected: false }
         );
       }
-    } else {
-      tempState = this.status.map((obj) =>
-        ev.detail.id === obj.id ? ev.detail : { ...obj }
-      );
     }
     this.setState(tempState);
   }
 
-  @Listen('scaleSelectionChanged')
-  selectionChangedHandler() {
-    this.selectedIndex = this.getSelectedIndex();
-    if (typeof(this.selectedIndex) !== 'number') { return }
-    this.getAllSegments().forEach((segment) => {
-      segment.setAttribute('selected-index', this.selectedIndex.toString());
-    })
-  }
-
   @Watch('disabled')
   @Watch('size')
   @Watch('selectedIndex')
@@ -135,15 +130,16 @@ export class SegmentedButton {
     segments.forEach((segment, i) => {
       tempState.push({
         id: segment.getAttribute('segment-id') || segment.segmentId,
-        selected: segment.hasAttribute('selected') || segment.selected,
+        selected:
+          segment.hasAttribute('selected') && segment.selected ? true : false,
       });
-      segment.setAttribute('position', `${i + 1}`);
+      segment.setAttribute('position', `${i}`);
       segment.setAttribute(
         'aria-description-translation',
         '$position $selected'
       );
     });
-    this.setState(tempState);
+    this.setState(tempState, true);
     this.selectedIndex = this.getSelectedIndex();
     this.showHelperText = this.shouldShowHelperText();
   }
@@ -185,7 +181,8 @@ export class SegmentedButton {
       const selectedIndex = allSegments.findIndex(
         (el: HTMLScaleSegmentElement) => el.selected === true
       );
-      return selectedIndex;
+      // we need to return -2 if no segment is selected
+      return selectedIndex >= 0 ? selectedIndex : -2;
     }
   }
 
@@ -235,7 +232,7 @@ export class SegmentedButton {
     return tempWidth;
   }
 
-  setState(tempState: SegmentStatus[]) {
+  setState(tempState: SegmentStatus[], isInitial: boolean = false) {
     const segments = Array.from(
       this.hostElement.querySelectorAll('scale-segment')
     );
@@ -250,7 +247,9 @@ export class SegmentedButton {
       );
     });
     this.status = tempState;
-    emitEvent(this, 'scaleChange', this.status);
+    if (!isInitial) {
+      emitEvent(this, 'scaleChange', { status: this.status, segments });
+    }
   }
 
   getAllSegments() {