material-components-web icon indicating copy to clipboard operation
material-components-web copied to clipboard

[MDCTextField] Trailing icons do not appear

Open LukazTrisauskas opened this issue 2 years ago • 1 comments

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

LukazTrisauskas avatar May 19 '23 18:05 LukazTrisauskas

It's working as expected.

mindaugasvcs avatar Mar 23 '24 11:03 mindaugasvcs