Skip to content

fix: slider in react and update react deps#2525

Open
christopherGdynia wants to merge 1 commit into
telekom:mainfrom
christopherGdynia:chore/update-react-types
Open

fix: slider in react and update react deps#2525
christopherGdynia wants to merge 1 commit into
telekom:mainfrom
christopherGdynia:chore/update-react-types

Conversation

@christopherGdynia

Copy link
Copy Markdown
Contributor

Description

This PR adds React 19 support to @telekom/scale-components-react and fixes a runtime crash in the scale-slider component that surfaced when running under the React (custom elements) build.

Changes

1. React 19 type support (packages/components-react/package.json)

  • Widened the @types/react-dom peer dependency range from ^18.3.1 to ^18.3.1 || ^19.0.0, so consumers on either React 18 or React 19 satisfy the peer requirement.
  • Marked @types/react-dom as optional via peerDependenciesMeta (types are only needed at build time, not by every consumer).

2. Slider crash fix (packages/components/src/components/slider/slider.tsx)

  • Renamed the internal state key offsetLefttrackOffsetLeft (and its range variants trackOffsetLeftFrom / trackOffsetLeftTo).
  • The component previously wrote to this.offsetLeft, which collides with the read-only native HTMLElement.offsetLeft getter. In the React / custom-elements build the component class extends HTMLElement, so this assignment threw at runtime.

Bug fixed

Cannot set property offsetLeft of [object HTMLElement] which has only a getter

Root cause: The slider stored the track's left offset on this.offsetLeft. This worked in the lazy build (where the instance is not an HTMLElement) but crashed in the React/custom-elements build, where offsetLeft is a read-only DOM property. This is a library-side issue, not a consumer implementation problem — the React 19 upgrade only made it visible.

Impact

  • No public API changes; the renamed key is internal only.
  • Fixes drag interaction for scale-slider (single and range) in React.
  • Enables React 19 consumers to install without peer dependency conflicts.

Testing

  • Verified slider drag works in the React example app
  • Verified install with React 18
  • Verified install with React 19
  • Rebuilt @telekom/scale-components and @telekom/scale-components-react

Copilot AI review requested due to automatic review settings July 1, 2026 10:00

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the React wrapper package to accept React 19 type definitions and fixes a runtime crash in scale-slider caused by writing to the read-only native HTMLElement.offsetLeft property in the custom-elements/React build.

Changes:

  • Renames the slider’s internal offsetLeft state key to trackOffsetLeft to avoid clashing with HTMLElement.offsetLeft.
  • Widens @types/react-dom peer dependency range to include React 19 and marks it optional via peerDependenciesMeta.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
packages/components/src/components/slider/slider.tsx Avoids runtime crash by renaming the internal offset key away from offsetLeft.
packages/components-react/package.json Expands peer type compatibility to React 19 and marks @types/react-dom as optional.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +210 to 211
const offsetLeftKey = this.getKeyFor('trackOffsetLeft');
const offsetLeft = this[offsetLeftKey];
"peerDependencies": {
"@telekom/scale-components": ">=3.0.0-beta.159",
"@types/react-dom": "^18.3.1",
"@types/react-dom": "^18.3.1 || ^19.0.0",
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants