fix(material-experimental): mdc-slider should not throw when rendering on the server #16993
Conversation
…g on the server Follow-up to the initial mdc-slider prototype implementation. This commit adds the mdc-slider to the universal-app test and also fixes issues that prevented the slider to be rendered on the server.
googlebot
added
the
cla: yes
| // The MDC slider foundation accesses DOM globals, so we cannot initialize the | ||
| // foundation on the server. The foundation would be needed to move the thumb | ||
| // to the proper position and to render the ticks. | ||
| this._foundation.init(); |
There was a problem hiding this comment.
@mmalerba @jelbourn Unfortunately there is an issue with MDC slider (and I guess it can be for other MDC foundations too). The slider thumb is moved in the MDC foundation through calculated pixels. This requires the foundation to perform element measurements using getBoundingClientRect.
In the server though, getBoundingClientRect is not available and therefore the foundation cannot move the thumb to the proper location. This is an issue for server-side rendering because the pre-rendered page will have sliders that do not reflect the initial value (until the page is hydrated)
Ideally, the slider foundation would not depend on the measurements of the slider element for moving the thumb. It should only depend on the measurements for determining the value from the click position. should I create an issue on their repo?
There was a problem hiding this comment.
Yeah I would create an issue on their repo. They've said that they want all of their components to be SSR compatible, so this sounds like a bug to me
There was a problem hiding this comment.
For reference: here is the issue: material-components/material-components-web#5058
| // The foundation cannot be destroyed on the server, as the foundation | ||
| // has not be initialized on the server. | ||
| if (this._platform.isBrowser) { | ||
| this._foundation.destroy(); |
There was a problem hiding this comment.
Maybe just check if (this._foundation)? That way if we add another condition to the initialization logic it won't break.
There was a problem hiding this comment.
The foundation is always created, so the check would always be true. If we would only create the foundation on the browser, I guess we'd need to make it "null"-able and handle it in more places.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Follow-up to the initial mdc-slider prototype implementation. This commit adds the mdc-slider
to the universal-app test and also fixes issues that prevented the slider to be rendered on
the server.