Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MDCTextField] Trailing icons do not appear #8106

Open
Luke1094 opened this issue May 19, 2023 · 1 comment
Open

[MDCTextField] Trailing icons do not appear #8106

Luke1094 opened this issue May 19, 2023 · 1 comment
Labels

Comments

@Luke1094
Copy link

Luke1094 commented May 19, 2023

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
@Luke1094 Luke1094 added the bug label May 19, 2023
@mindaugasvcs
Copy link

It's working as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants