MDCTextField / Icon : clicking on trailing or leading icon does not focus the text field

Bug report

I’ve created a TextField with a leading icon. When I click on this icon (well positioned inside the field) I supposed that the field should be focused …

My icon tag contains tabindex="0" and role="button" (see code below)

I suppose that it’s not the right behavior because the documentation talks about the clickable behavior of the icon (Ex : “if you would like to display un-clickable icons, simply omit tabindex=“0” …” see here ).

Steps to reproduce

1. Try with that HTML code :

<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label mdc-text-field--with-leading-icon">
    <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>

    <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__trailing"></span>
    </span>
    
    <input 
        type="text"
        class="mdc-text-field__input"
        id="my-event-field"
        name="my-event-field"
        autocomplete="off"
        aria-label="my-label-id"
        required="required"
    />
</div>

1. Instantiate the MdcTextField Component :

const textfields = document.querySelectorAll('.mdc-text-field');
textfields.forEach(function(currentValue) {
   const textField = new MDCTextField(currentValue);
});

1. See the Text-Field and click just on the trailing icon

2. The field (input) is not focused, and I cannot type my text 😦

Actual behavior

The icon is well displayed, the cursor is a “pointer” … but on click the input field is not focused.

Expected behavior

The TextField should be focused when I click anywhere inside the field, including leading and trailing icons.

Your Environment:

Software	Version(s)
MDC Web	7.0
Browser	Chrome 35
Operating System	MacOs 10

[EstebanG23]

Hmm I see. Looking more into your code it seems the HTML structure you have does not match the structure mentioned in the Text field icon README, the <label> wrapper is missing. The <label> element was added so you can click the associated label to focus/activate the input.

Would using the below structure help?

<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__notch">
      <span class="mdc-floating-label" id="my-label-id">Your Name</span>
    </span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
</label>

[EstebanG23]

No problem happy to help!