Repository: ionic-team/ionic-framework
File: core/src/components/segment-view/segment-view.tsx (TypeScript)

Code before:

  /**
   * @internal
   *
   * This method is used to programmatically set the displayed segment content
   * in the segment view. Calling this method will update the `value` of the
   * corresponding segment button.
   *
   * @param id: The id of the segment content to display.
   * @param smoothScroll: Whether to animate the scroll transition.
   */
  @Method()
  async setContent(id: string, smoothScroll = true) {
    const contents = this.getSegmentContents();
    const index = contents.findIndex((content) => content.id === id);
    const isRTL = window.getComputedStyle(this.el).direction === 'rtl';

    if (index === -1) return;

    this.isManualScroll = false;
    this.resetScrollEndTimeout();

    const contentWidth = this.el.offsetWidth;
    this.el.scrollTo({
      top: 0,
      left: (isRTL ? -1 : 1) * index * contentWidth,
      behavior: smoothScroll ? 'smooth' : 'instant',
    });
  }

  private getSegmentContents(): HTMLIonSegmentContentElement[] {
    return Array.from(this.el.querySelectorAll('ion-segment-content'));
  }

  render() {
    const { disabled, isManualScroll } = this;

    return (
      <Host
        class={{
          'segment-view-disabled': disabled,
          'segment-view-scroll-disabled': isManualScroll === false,
        }}
      >
        <slot></slot>
      </Host>
    );
  }
}


Review comment (suggestion):
This current approach may not work in certain browsers. Instead of negating the left offset, you may want to do something like:

```typescript
const offset = index * contentWidth; 
const max = this.el.scrollWidth - this.el.clientWidth;
```
 and set `left: isRTL(this.el) ? (max - offset) : offset`. 

I think that should work better, anyway, you may need to play with it some. We should be using `isRTL` here at the very least.

Code after:
  }

  /**
   * @internal
   *
   * This method is used to programmatically set the displayed segment content
   * in the segment view. Calling this method will update the `value` of the
   * corresponding segment button.
   *
   * @param id: The id of the segment content to display.
   * @param smoothScroll: Whether to animate the scroll transition.
   */
  @Method()
  async setContent(id: string, smoothScroll = true) {
    const contents = this.getSegmentContents();
    const index = contents.findIndex((content) => content.id === id);

    if (index === -1) return;

    this.isManualScroll = false;
    this.resetScrollEndTimeout();

    const contentWidth = this.el.offsetWidth;
    const offset = index * contentWidth;

    this.el.scrollTo({
      top: 0,
      left: (isRTL(this.el) ? -1 : 1) * offset,
      behavior: smoothScroll ? 'smooth' : 'instant',
    });
  }

  private getSegmentContents(): HTMLIonSegmentContentElement[] {
    return Array.from(this.el.querySelectorAll('ion-segment-content'));
  }

  render() {
    const { disabled, isManualScroll } = this;

    return (
      <Host
        class={{
          'segment-view-disabled': disabled,
          'segment-view-scroll-disabled': isManualScroll === false,
        }}
      >
        <slot></slot>
      </Host>
    );
  }
}