fix: slider in react and update react deps#2525
Open
christopherGdynia wants to merge 1 commit into
Open
Conversation
Contributor
There was a problem hiding this comment.
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
offsetLeftstate key totrackOffsetLeftto avoid clashing withHTMLElement.offsetLeft. - Widens
@types/react-dompeer dependency range to include React 19 and marks it optional viapeerDependenciesMeta.
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", |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds React 19 support to
@telekom/scale-components-reactand fixes a runtime crash in thescale-slidercomponent that surfaced when running under the React (custom elements) build.Changes
1. React 19 type support (
packages/components-react/package.json)@types/react-dompeer dependency range from^18.3.1to^18.3.1 || ^19.0.0, so consumers on either React 18 or React 19 satisfy the peer requirement.@types/react-domas optional viapeerDependenciesMeta(types are only needed at build time, not by every consumer).2. Slider crash fix (
packages/components/src/components/slider/slider.tsx)offsetLeft→trackOffsetLeft(and its range variantstrackOffsetLeftFrom/trackOffsetLeftTo).this.offsetLeft, which collides with the read-only nativeHTMLElement.offsetLeftgetter. In the React / custom-elements build the component class extendsHTMLElement, 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 anHTMLElement) but crashed in the React/custom-elements build, whereoffsetLeftis 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
scale-slider(single and range) in React.Testing
@telekom/scale-componentsand@telekom/scale-components-react