material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.11k stars 2.15k forks source link

[MDCTextField] Trailing icons do not appear #8106

Open zugzwang5 opened 1 year ago

zugzwang5 commented 1 year ago

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;
}
  1. 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>
  1. 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
mindaugasvcs commented 3 months ago

It's working as expected.