Rmwc: TextField notched outline breaks when resized
Sandbox
https://codesandbox.io/s/98v61v5wjp
Description
- RMWC Version: 4.0.1
- Build system: Webpack
When a <TextField outlined /> has content its border turns into an SVG path. This SVG path breaks when the component resizes.
The component should behave as the MDC notched outline. It has the border divided in three sections to allow the notch, instead of using SVG.
AlvYuste
All 9 comments
I feel your pain. I'm suffering this too...
escorponox
on 19 Dec 2018
Same here.
aarongarciah
on 19 Dec 2018
This has been a running issue with MDC. This was an issue I had open for it a long time ago. https://github.com/material-components/material-components-web/issues/3231
The good news is, with MDC 0.42.0, they've refactored the notched outline so it should work appropriately. The Holidays have pushed the next RMWC release a little behind, but you can expect this early January.
jamesmfriedman
on 19 Dec 2018
Thanks @jamesmfriedman 馃槃
aarongarciah
on 20 Dec 2018
Is there an ETA on 0.42 support? That SVG notched outline is causing us display issues. In the interim does anyone know how to force a Select to repaint?
robcaldecottvelo
on 16 Jan 2019
@robcaldecottvelo 0.42 support is coming along with the Typescript refactor. This is the optimum time to do that since I know the MDC team is also doing a TS refactor and won't release until it is done. The TS refactor for RMWC is well underway on the TS branch, I'm expecting another week to week and half to make sure everything is buttoned up and well tested.
I looked into both the code on the RMWC side as well as the MDC side. I haven't verified this works, but it is my best guess for you if this is a pressing issue. Since the SVG notched outlines have been around for a year, I don't imagine this is a new issue for you.
- Use a
refto get access to the Select component. ` - You should be able to call
this.selectApi.foundation_.layout()which will force MDC to redraw its SVG. Note that at this point, you are directly interfacing with the MDC library. - You could bind this behavior to something like the window resize event by creating a wrapper component around the Select that listens for resize and calls layout whenever it changes.
Honestly, it would probably be easiest to wait the couple of weeks. My number 1 goal with the TS release is minimal breaking changes accept for anything that 0.42 brought in.
jamesmfriedman
on 16 Jan 2019
Mmmm @jamesmfriedman
Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
class App extends React.Component {
ref = React.createRef();
render() {
return (
<Select ref={this.ref} />
);
}
}
However, this seems to give me something:
class App extends React.Component {
ref = React.createRef();
render() {
return (
<Select
rootProps={{
ref: this.ref
}}
/>
);
}
}
But I don't see any of the MDC JS properties. It's giving me the SelectRoot.
robcaldecottvelo
on 16 Jan 2019
Dangit. Yeah you might be stuck on this particular one. I'll let you know when 0.42 is out.
jamesmfriedman
on 16 Jan 2019
Fixed with the release of V5, MDC changed how they do outlined text fields
jamesmfriedman
on 14 Feb 2019
Related issues
filbertteo
路
3Comments
prateekbh
路
6Comments
jamesmfriedman
路
3Comments
alecchisi
路
5Comments
jamesmfriedman
路
6Comments
Most helpful comment
This has been a running issue with MDC. This was an issue I had open for it a long time ago. https://github.com/material-components/material-components-web/issues/3231
The good news is, with MDC 0.42.0, they've refactored the notched outline so it should work appropriately. The Holidays have pushed the next RMWC release a little behind, but you can expect this early January.