fix(segment-view): disable scrolling when triggered by button click

Author: Tanner Reits

core/src/components.d.ts

@@ -34,6 +34,7 @@ import { NavigationHookCallback } from "./components/route/route-interface";
 import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 import { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
 import { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
+import { SegmentViewScrollEvent } from "./components/segment-view/segment-view-interface";
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
@@ -69,6 +70,7 @@ export { NavigationHookCallback } from "./components/route/route-interface";
 export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 export { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
 export { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
+export { SegmentViewScrollEvent } from "./components/segment-view/segment-view-interface";
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
@@ -4442,10 +4444,7 @@ declare global {
         new (): HTMLIonSegmentContentElement;
     };
     interface HTMLIonSegmentViewElementEventMap {
-        "ionSegmentViewScroll": {
-    scrollRatio: number;
-    isManualScroll: boolean;
-  };
+        "ionSegmentViewScroll": SegmentViewScrollEvent;
         "ionSegmentViewScrollEnd": void;
         "ionSegmentViewScrollStart": void;
     }
@@ -7542,10 +7541,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the segment view is scrolled.
          */
-        "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{
-    scrollRatio: number;
-    isManualScroll: boolean;
-  }>) => void;
+        "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<SegmentViewScrollEvent>) => void;
         /**
           * Emitted when the segment view scroll has ended.
          */

core/src/components/segment-view/segment-view-interface.ts

@@ -0,0 +1,4 @@
+export interface SegmentViewScrollEvent {
+  scrollRatio: number;
+  isManualScroll: boolean;
+}

core/src/components/segment-view/segment-view.scss

@@ -25,3 +25,7 @@
   touch-action: none;
   overflow-x: hidden;
 }
+
+:host(.segment-view-scroll-disabled) {
+  pointer-events: none;
+}

core/src/components/segment-view/segment-view.tsx

@@ -1,5 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Listen, Method, Prop, h } from '@stencil/core';
+import { Component, Element, Event, Host, Listen, Method, Prop, State, h } from '@stencil/core';
+
+import type { SegmentViewScrollEvent } from './segment-view-interface';
 
 @Component({
   tag: 'ion-segment-view',
@@ -12,7 +14,6 @@ import { Component, Element, Event, Host, Listen, Method, Prop, h } from '@stenc
 export class SegmentView implements ComponentInterface {
   private scrollEndTimeout: ReturnType<typeof setTimeout> | null = null;
   private isTouching = false;
-  private isManualScroll = true;
 
   @Element() el!: HTMLElement;
 
@@ -21,13 +22,17 @@ export class SegmentView implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  /**
+   * If `true`, the segment view is scrollable.
+   * If `false`, pointer events will be disabled. This is to prevent issues with
+   * quickly scrolling after interacting with a segment button.
+   */
+  @State() isManualScroll = true;
+
   /**
    * Emitted when the segment view is scrolled.
    */
-  @Event() ionSegmentViewScroll!: EventEmitter<{
-    scrollRatio: number;
-    isManualScroll: boolean;
-  }>;
+  @Event() ionSegmentViewScroll!: EventEmitter<SegmentViewScrollEvent>;
 
   /**
    * Emitted when the segment view scroll has ended.
@@ -83,7 +88,7 @@ export class SegmentView implements ComponentInterface {
     }
     this.scrollEndTimeout = setTimeout(() => {
       this.checkForScrollEnd();
-    }, 150);
+    }, 50);
   }
 
   /**
@@ -129,12 +134,13 @@ export class SegmentView implements ComponentInterface {
   }
 
   render() {
-    const { disabled } = this;
+    const { disabled, isManualScroll } = this;
 
     return (
       <Host
         class={{
           'segment-view-disabled': disabled,
+          'segment-view-scroll-disabled': !isManualScroll,
         }}
       >
         <slot></slot>

core/src/components/segment/segment.tsx

@@ -7,6 +7,7 @@ import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
+import type { SegmentViewScrollEvent } from '../segment-view/segment-view-interface';
 
 import type { SegmentChangeEventDetail, SegmentValue } from './segment-interface';
 
@@ -366,7 +367,7 @@ export class Segment implements ComponentInterface {
   }
 
   @Listen('ionSegmentViewScroll', { target: 'body' })
-  handleSegmentViewScroll(ev: CustomEvent) {
+  handleSegmentViewScroll(ev: CustomEvent<SegmentViewScrollEvent>) {
     const { scrollRatio, isManualScroll } = ev.detail;
 
     if (!isManualScroll) {

packages/angular/src/directives/proxies.ts

@@ -2047,11 +2047,13 @@ export class IonSegmentView {
 }
 
 
+import type { SegmentViewScrollEvent as IIonSegmentViewSegmentViewScrollEvent } from '@ionic/core';
+
 export declare interface IonSegmentView extends Components.IonSegmentView {
   /**
    * Emitted when the segment view is scrolled.
    */
-  ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollRatio: number; isManualScroll: boolean; }>>;
+  ionSegmentViewScroll: EventEmitter<CustomEvent<IIonSegmentViewSegmentViewScrollEvent>>;
   /**
    * Emitted when the segment view scroll has ended.
    */

packages/angular/standalone/src/directives/proxies.ts

@@ -1886,11 +1886,13 @@ export class IonSegmentView {
 }
 
 
+import type { SegmentViewScrollEvent as IIonSegmentViewSegmentViewScrollEvent } from '@ionic/core/components';
+
 export declare interface IonSegmentView extends Components.IonSegmentView {
   /**
    * Emitted when the segment view is scrolled.
    */
-  ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollRatio: number; isManualScroll: boolean; }>>;
+  ionSegmentViewScroll: EventEmitter<CustomEvent<IIonSegmentViewSegmentViewScrollEvent>>;
   /**
    * Emitted when the segment view scroll has ended.
    */