MDCTextField, MDCSelect floating label broken when inside MDCDialog with having a pre filled value

[MrSimmmons]

trafficstars

Bugs

Having pre filled values inside a notched outline versions of MDCTextField and MDCSelect elements doesn't seem to show them. For some reason the extra width style that is applied to make the notch wide enough for the text just starts out at 0. If you go into inspect element and manually change the extra style that is applied to the notch, the label will show up.

What MDC Web Version are you using?

0.43.1

What browser(s) is this bug affecting?

Chrome

What OS are you using?

MacOS

What are the steps to reproduce the bug?

Put a pre-filled notched outlined version of MDCTextField or MDCSelect inside a dialog

CodePen

What is the expected behavior?

The label shows up

What is the actual behavior?

The labels don't show up

Any other information you believe would be useful?

This only seems to effect the text field and select elements when they is inside a dialog as the background text field and select elements use the exact same code and work fine

[kfranqueiro]

This is happening because the text fields are trying to initially measure the label to compute the necessary width for the notch, but they're initially display: none within the dialog so the measurements come out as 0.

You can resolve this by calling layout on the text field and select elements after opening the dialog.

Here's an example based on your codepen (it's a bit overly trivial since in this case all of the auto-init components are inside the dialog): https://codepen.io/kfranqueiro/pen/ZwezME

[MrSimmmons]

Ah awesome thank you @kfranqueiro! On a side note, any idea why this happens? The floating label getting cut off.

It happens in both of our code pens

[kfranqueiro]

This is happening because the floating label for outlined text fields extends slightly beyond the top of the text field itself, meanwhile MDC Dialog's content area has no top padding as long as there's no scrolling, but also sets overflow: auto so that the content can scroll if it gets too tall.

I wonder if we could move some of the padding from the title region to the content region of the dialog while still preserving the current styles when scrolling is present.

[abhiomkar]

Adding this to icebox to consider adding inner padding to dialog's content section.

[cintaccs]

The cutting off the floating label will occur in any "container" not only dialog content section. Setting a margin-top:10px on the mdc-select element will solve it in general. Maybe worth to consider instead of specific to each container.

[KentuckyMC]

Same issue with the notch over here. We're using some mdc expansion boxes with different mdc components in it. Is it possible to add something in the outlined textfields / selects that if they're visible the layout() function will be called anyways?

[ota-meshi]

I solved this issue using the following CSS. The version I am using is 1.1.1.

.mdc-notched-outline__notch {
  /* Ignore the width set by script, and change it to be calculated from the width of `mdc-floating-label` by setting `auto`. */
  width: auto !important;
}

.mdc-notched-outline__notch > label.mdc-floating-label--float-above {
  /* Remove `scale(0.75)` to apply the correct width to `mdc-notched-outline__notch`. */
  transform: translateY(-130%);

  /* Calculate `scale(0.75)` with each property. */
  font-size: calc(1rem * 0.75);
  top: calc(17px * (1 - ((1 - 0.75) / 2)));
}

/* with leading-icon */
.mdc-text-field--with-leading-icon .mdc-notched-outline__notch > label.mdc-floating-label--float-above {
  transform: translateY(-130%) translateX(-32px);
  font-size: calc(1rem * 0.75); /* Re-apply the above selector because the score is low. */
}

.mdc-notched-outline__notch > label.mdc-floating-label {
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    /* Now that we calculate `scale(0.75)` for each property, we add each property to the target of the animation. */
    font-size 150ms cubic-bezier(0.4, 0, 0.2, 1),
    top 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

[bcalisch]

I solved this issue using the following CSS. The version I am using is 1.1.1.

.mdc-notched-outline__notch {
  /* Ignore the width set by script, and change it to be calculated from the width of `mdc-floating-label` by setting `auto`. */
  width: auto !important;
}
...

@ota-meshi

When I tried this there turned out to be extra space to the right of the label. This solution is almost perfect otherwise. Looks like this:

Also, as some background, I am using LitElement. I tried using the MDCTextField.attachTo() method in the firstUpdated callback that LitElement provides (this is one of the last methods in the life cycle and probably the best option I have available at the moment). If I call layout() inside that method it doesn't work. If I wait 900-1000 ms using setTimeout, it DOES work. Rather strange. I need a callback of some sort so that I know when I should call layout() again.

Any suggestions would be greatly appreciated.

[wunaidage]

This is happening because the text fields are trying to initially measure the label to compute the necessary width for the notch, but they're initially display: none within the dialog so the measurements come out as 0.

You can resolve this by calling layout on the text field and select elements after opening the dialog.

Here's an example based on your codepen (it's a bit overly trivial since in this case all of the auto-init components are inside the dialog): https://codepen.io/kfranqueiro/pen/ZwezME

this also happens when I was simply trying to assign value to the text field by textField.value = 'somevalue'. and directly calling layout() after value assignment does not resolve the problem. you need to wrap the layout call in setTimeout.

setTimeout(() => {
        textField.layout();
    });

but mdc select does not work using this way. for select, the space is vacate for the floating label to fill but the label stays inside the box.

[rocketraman]

Not quite sure why this is in the backlog... this happens consistently, is easy to reproduce, is an obvious rendering failure, and it looks really ugly / unprofessional.