bug: Swipeable Segments won't work with dir=RTL

[emnawer]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

• Swipeable Segments (IonSegment and IonSegmentView) do not work if dir="rtl" add to body tag. If click on button, it won't slide content of the next segment.
• Under Firefox's Responsive Design Mode (mobile): if try to swipe instead of clicking the button, it will through an error:_

TypeError: button is undefined
    getIndicator ion-segment.js:262
    checkButton ion-segment.js:267
    handleSegmentViewScroll ion-segment.js:333
    hostListenerProxy index.js:2925
    emitEvent index.js:804
    emit index.js:793
    handleScroll ion-segment-view.js:27
    hostListenerProxy index.js:2925
    ael index.js:131
 undefined [index.js:52:61](http://localhost:8100/node_modules/@stencil/core/internal/client/index.js)
    consoleError index.js:52
    hostListenerProxy index.js:2928
    emitEvent index.js:804
    emit index.js:793
    handleScroll ion-segment-view.js:27
    hostListenerProxy index.js:2925
    (Async: EventListener.handleEvent)
    ael index.js:131
    addHostEventListeners index.js:2910
    addHostEventListeners index.js:2906
    connectedCallback index.js:2647
    React 105
    (Async: VoidFunction)
        ensureRootIsScheduled
        scheduleUpdateOnFiber
        enqueueSetState
        setState
    handleHistoryChange IonRouter.tsx:204
    handleHistoryChange IonReactRouter.tsx:37
    listener history.js:155
    notifyListeners history.js:173
    notifyListeners history.js:172
    setState history.js:288
    replace history.js:402
    confirmTransitionTo history.js:145
    replace history.js:385
    handleNavigate IonRouter.tsx:243
    handleNavigateBack IonRouter.tsx:292
    goBack NavManager.tsx:96
    clickButton IonBackButton.tsx:37
    React 23
    (Async: EventListener.handleEvent)
        addEventBubbleListener
        addTrappedEventListener
        listenToNativeEvent
        listenToAllSupportedEvents
        listenToAllSupportedEvents
        createRoot
        createRoot$1
        createRoot
    <anonymous> index.jsx:13

​

Expected Behavior

Both IonSegment and IonSegmentView obey the RTL direction.

Steps to Reproduce

1. Copy ReactJS code from (https://ionicframework.com/docs/api/segment#swipeable-segments), add dir="rtl" to body tag or to both IonSegment and IonSegmentView
2. If click on any IonSegmentButton no feedback (segment wont auto-slide), if swipe the console with through an error.
3. Look at console error log the following: TypeError: button is undefined

Code Reproduction URL

https://ionicframework.com/docs/api/segment#swipeable-segments

Ionic Info

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/react 8.4.1

Capacitor:

Capacitor CLI : 6.2.0 @capacitor/android : not installed @capacitor/core : 6.2.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.18.1 npm : 10.8.2 OS : Linux 5.15

Additional Information

Temporary solution: hard-code dir="ltr" to IonSegmentView tag and hope the user won't notice the wrong slide direction.

[aalzehla]

Any update about this bug. The issue still not solved. in ionic version 8.6.0

[ShaneK]

Hey! This should be resolved in 8.7.4 - out now!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.