TextField notched label does not render correctly in Dialog

[jmasukawa]

Re-opening per "issue bankruptcy / full reset", this one is still an issue.

Original issue: #680

Sandbox (issue in Dialog): https://codesandbox.io/s/rmwc-typescript-sandbox-sflq6?file=/src/index.tsx

• What RMWC Version are you using [major.minor.patch]: Sandbox is using "latest" (should be 7.0.2).

• Name your build system [Webpack, Rollup...]: unsure, whatever RMWC Typescript Sandbox uses.

• Describe the bug with as much detail as possible:
  When a TextField with a label renders immediately within a Dialog or Drawer, the label notch width is incorrect. I had some more detailed thoughts on the original thread, but I believe i tracked it down to a measure ref that's taking a width measurement while the DOM is unstable (Dialog / Drawer is still nascent and transitioning in).

• What happened, and what was supposed to happen:
  
  ^Label "bar" is not rendered correctly. If you trigger a re-render of the label (click on the field, type some things / delete some things), this gets fixed.

A short-term workaround that I've been using in some projects, is to put a timeout / async delay on rendering the content of a Dialog or Drawer that has a TextField within it. This ensures the measure ref is taken when the DOM is in a stable state, but is not convenient to use.

Thanks for your effort on this project!

[jensborch]

@jmasukawa Version 14 has been released, and we kindly request you to retest and verify whether the issue persists in the latest version

[jmasukawa]

Thanks! Ack that this is on my list, I just haven't had a chance to try it yet. Hoping to give the upgrade a try later this week and will get back to you.

[jmasukawa]

@jensborch Hm, updated to 14.0.7 and still seems to be an issue.

Specifically, the issue occurs for me when a TextField has a label, in conjunction with the floatLabel and outlined props. And also when the TextField is inside a Dialog.

It looks like the original code sandbox is no longer working, but this is reproducible on your demo site.

1. Navigate to: https://rmwc.io/dialogs for version 14.0.7
2. In the "Standard Usage" live demo, edit the live code sample. Replace this line:

<DialogContent>This is a standard dialog.</DialogContent>

with this:

<DialogContent style={{ padding: "8px" }}>
  <TextField label="Label" floatLabel outlined />
</DialogContent>

3. Click the "Open Standard Dialog" button to open the Dialog.

4. Observe that the outline draws through the floating label.
   

I haven't looked at the latest version of code to assess the issue, but I would suspect it is from the same root cause mentioned above. tl;dr; I think a measure ref inside TextField is taking a measurement for the outline notch when the DOM is unstable. The instability is due to Dialog transitioning in when opened.

Side note: it's personally not a high priority for this issue to be resolved, since we've been using our workaround for over a year and it has been working okay for us.