material-components-web
material-components-web copied to clipboard
[MDCTextField] Trailing icons do not appear
Bug report
I've created a TextField with a trailing icon and it does not appear, unless I hover over the text field. I've tried the same with leading icon, and it seem to work.
Steps to reproduce
CSS
.textField {
width:100%;
margin:0 0 10px 0;
}
- HTML code using trailing-icon class
<div class="mdc-layout-grid__cell--span-12">
<label class="mdc-text-field mdc-text-field--with-trailing-icon textField">
<span class="mdc-floating-label">Application</span>
<input id="app" class="mdc-text-field_input form_input">
<i class="material-icons mdc-text-field__icon mdc-text-field--with-trailing-icon">arrow_drop_down</i>
<span class="mdc-line-ripple"></span>
</label>
- HTML code using leading-icon class
<label class="mdc-text-field mdc-text-field--with-leading-icon textField">
<span class="mdc-floating-label">Application</span>
<input id="app" class="mdc-text-field_input form_input">
<i class="material-icons mdc-text-field__icon mdc-text-field--with-leading-icon">arrow_drop_down</i>
<span class="mdc-line-ripple"></span>
</label>
Actual behavior
When hovering over the TextField the trailing icon appears.
Expected behavior
Trailing icon should always be visible.
Your Environment:
| Software | Version(s) |
|---|---|
| MDC Web | ? |
| Browser | Chrome 113 |
| Operating System | Windows 10 |
It's working as expected.