Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

EstebanG23commented, Nov 4, 2020

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 class="mdc-notched-outline__trailing"></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">
EstebanG23commented, Nov 4, 2020

No problem happy to help!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Text field icon - Material Design
Leading and trailing icons can be applied to default or mdc-text-field--outlined Text Fields. To add an icon, add the relevant class ...
Read more >
Text Field - Material Components for the Web
Leading and trailing icons can be added within the default or outlined variant of MDC Text Field as visual indicators as well as...
Read more >
@material/textfield - npm
Note: Do not use mdc-line-ripple inside of mdc-text-field if you plan on ... Leading and trailing icons can be added within the default...
Read more >
Text Field - Blox Material
Text Field (mdcTextField) components of Blox Material, a lightweight Material ... input element, line, helper text, and possibly a leading or trailing icon....
Read more >
javascript - MUI TextField focus show difference iconbutton at ...
if the user didn't type anything or user blur out of this input component. need to show the eyes button Icon. The clear...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found