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

[damienfa]

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]

Hi there, thank you for reporting this. According to the documentation if you use tabindex="0" and role="button" then the icon will act as a button and have it's own focus. This can be used in cases where when clicking on the icon something should happen (ex. an eye icon to show/hide a password).

If you wish to have the icon be only decorative (and bring focus to the text field on click) then omit tabindex="0" and role="button". Please let me know if this works or if you have any questions.

[damienfa]

Hi !

Sorry I didn't tell that when I omit the tabindex="0" role="button" attributes, the behavior is exactly the same.
There is no way to make a focus inside the TextField when the icon is clicked ... :-(
Does anyone notice the same thing?

More over the problem is not only about the "icon", the only way to give focus to an TextField is the blue zone in the image below :

As you can see, the icon area and the little white area on the right are not really "clickable" (= they don't give the focus to the when clicked).

(MDCTextField 7.0 / Chrome / MacOsx)

[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>

[damienfa]

🎉   It works !

The <div> vs <label> was the problem. I've totally missed it !
It wasn't a bug at all 🤦🏻‍♂️

Thanks for your help !

[EstebanG23]

No problem happy to help!