fix:#2400 infinite recursion in scale segmented button (#2421)

* fix: prevent event loop by distinguishing user and programmatic selection in scaleClick event

* fix: format code with prettier

* fix: fix linter errors

* fix: some temporary test code

* fix: simplified and prevent double emits of scale-click-events

* fix: add toggle test to html page for changing the selected state

* fix: add documentation

* fix: prepare for pr

---------

Co-authored-by: Michael Obst <michael.obst@telekom.de>

Author: obstmi

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

@@ -29,10 +29,10 @@
 
 ## Events
 
-| Event         | Description                                                                                        | Type                                              |
-| ------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
-| `scale-click` | Emitted when button is clicked                                                                     | `CustomEvent<{ id: string; selected: boolean; }>` |
-| `scaleClick`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<{ id: string; selected: boolean; }>` |
+| Event         | Description                                                                                        | Type                                                                         |
+| ------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| `scale-click` | Emitted when button is clicked                                                                     | `CustomEvent<{ id: string; selected: boolean; userInteraction?: boolean; }>` |
+| `scaleClick`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<{ id: string; selected: boolean; userInteraction?: boolean; }>` |
 
 
 ## Methods

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

@@ -72,21 +72,26 @@ export class Segment {
   @Event({ eventName: 'scale-click' }) scaleClick!: EventEmitter<{
     id: string;
     selected: boolean;
+    userInteraction?: boolean;
   }>;
   /** @deprecated in v3 in favor of kebab-case event names */
   @Event({ eventName: 'scaleClick' }) scaleClickLegacy!: EventEmitter<{
     id: string;
     selected: boolean;
+    userInteraction?: boolean;
   }>;
 
   private focusableElement: HTMLElement;
+  private userInteraction = false; // 'false' indicates that this event is triggered by internal state change
 
   @Watch('selected')
   selectionChanged() {
     emitEvent(this, 'scaleClick', {
       id: this.segmentId,
       selected: this.selected,
+      userInteraction: this.userInteraction,
     });
+    this.userInteraction = false;
   }
 
   @Method()
@@ -163,6 +168,7 @@ export class Segment {
       return;
     }
     event.preventDefault();
+    this.userInteraction = true;
     this.selected = !this.selected;
   };
 

packages/components/src/components/segmented-button/readme.md

@@ -24,10 +24,10 @@
 
 ## Events
 
-| Event          | Description                                                                                        | Type               |
-| -------------- | -------------------------------------------------------------------------------------------------- | ------------------ |
-| `scale-change` | Emitted when button is clicked                                                                     | `CustomEvent<any>` |
-| `scaleChange`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<any>` |
+| Event          | Description                                                                                                                         | Type               |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `scale-change` | Emitted when button is clicked. Not emitted in case of programmatic state changes (e.g. the `selected` state is set by the skript). | `CustomEvent<any>` |
+| `scaleChange`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/>                                  | `CustomEvent<any>` |
 
 
 ## Dependencies

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

@@ -67,15 +67,22 @@ export class SegmentedButton {
   ariaLabelTranslation = `segment button with $slottedSegments`;
   @Prop({ mutable: true })
   longestButtonWidth: string;
-  /** Emitted when button is clicked */
+  /** Emitted when button is clicked. Not emitted in case of programmatic state changes (e.g. the `selected` state is set by the skript). */
   @Event({ eventName: 'scale-change' }) scaleChange: EventEmitter;
   /** @deprecated in v3 in favor of kebab-case event names */
   @Event({ eventName: 'scaleChange' }) scaleChangeLegacy: EventEmitter;
 
   container: HTMLElement;
   showHelperText = false;
   @Listen('scaleClick')
-  scaleClickHandler(ev: { detail: { id: string; selected: boolean } }) {
+  scaleClickHandler(
+    ev: CustomEvent<{
+      id: string;
+      selected: boolean;
+      userInteraction?: boolean;
+    }>
+  ) {
+    const { userInteraction = true } = ev.detail; // set default to true, which leads to emit the scaleChange-event finally
     let tempState = this.getAllSegments().map((segment) => {
       return {
         id: segment.segmentId,
@@ -92,9 +99,9 @@ export class SegmentedButton {
           ev.detail.id === obj.id ? ev.detail : { ...obj, selected: false }
         );
       }
-      this.setState(tempState, ev.detail.selected);
+      this.setState(tempState, userInteraction && ev.detail.selected);
     } else {
-      this.setState(tempState);
+      this.setState(tempState, userInteraction);
     }
   }
 

packages/components/src/html/segment-button.html

@@ -69,12 +69,57 @@
       </scale-segment>
     </scale-segmented-button>
     <div style="height: 20px"></div>
-
     <scale-segmented-button multi-select>
       <scale-segment selected>Apple</scale-segment>
       <scale-segment selected>One+</scale-segment>
       <scale-segment>Samsung</scale-segment>
       <scale-segment>Huawei</scale-segment>
     </scale-segmented-button>
+    <div style="height: 20px"></div>
+    <hr />
+    <section>
+      <scale-button id="toggle-button"
+        >Change selected state of the segments</scale-button
+      >
+      <div style="height: 10px"></div>
+      <scale-segmented-button id="segmented-button-toggle">
+        <scale-segment id="segment-alpha">Option A</scale-segment>
+        <scale-segment id="segment-beta" selected>Option B</scale-segment>
+      </scale-segmented-button>
+      <p>
+        <b>state: <span id="state-display">b</span></b>
+      </p>
+    </section>
+    <!-- functionality for changing the selected-state of the segments -->
+    <script>
+      let selectedOption = 'b';
+      const toggleButton = document.getElementById('toggle-button');
+      const segmentedButtonToggle = document.getElementById(
+        'segmented-button-toggle'
+      );
+      const segmentAlpha = document.getElementById('segment-alpha');
+      const segmentBeta = document.getElementById('segment-beta');
+      const stateDisplay = document.getElementById('state-display');
+
+      function updateState() {
+        segmentAlpha.selected = selectedOption === 'a';
+        segmentBeta.selected = selectedOption === 'b';
+      }
+
+      function onClick() {
+        selectedOption = selectedOption === 'a' ? 'b' : 'a';
+        updateState();
+        stateDisplay.textContent = selectedOption;
+      }
+
+      function onChange(event) {
+        selectedOption = selectedOption === 'a' ? 'b' : 'a';
+        updateState();
+        stateDisplay.textContent = selectedOption;
+      }
+
+      toggleButton.addEventListener('click', onClick);
+      segmentedButtonToggle.addEventListener('scale-change', onChange);
+    </script>
   </body>
 </html>

packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx

@@ -10,7 +10,14 @@ import ScaleSegmentedButton from './ScaleSegmentedButton.vue';
     },
     ariaLabelTranslation: {
       description: "(optional) aria-label attribute needed for icon-only buttons"
-    }
+    },
+    scaleChange: {
+      description: '@deprecated in v3 in favor of kebab-case event names.',
+    },
+    'scale-change': {
+      description:
+        'Emitted when button is clicked. Not emitted in case of programmatic state changes (e.g. the `selected` state is set by the skript).',
+    },
   }}
 />