5

I have this code

    this.mdc_text = mdc.textField.MDCTextField.attachTo(this.$el);
    if (this.autofocus) {
        this.mdc_text.activateFocus();
    }

but the function activateFocus is undefined. How can I focus it?

https://material.io/develop/web/components/input-controls/text-field/

Thanks

benvc
  • 14,448
  • 4
  • 33
  • 54
omega
  • 40,311
  • 81
  • 251
  • 474

1 Answers1

4

activateFocus is used with MDCTextFieldFoundation when creating a component for a framework. In your case, it looks like you are trying to programmatically focus an MDC textfield, so use the focus method instead.

const field = mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
field.focus();
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material TextField</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>   
  </head>
  <body>  
    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <input class="mdc-text-field__input" type="text">
      <span class="mdc-floating-label">Hint text</span>
      <span class="mdc-line-ripple"></span>
    </label> 
  </body>
</html>

As an aside, if you want a the TextField to be automatically focused on page load, then you can add the autofocus attribute to the input element in your html.

benvc
  • 14,448
  • 4
  • 33
  • 54
  • I tried your snippet, but it doesn't look like it gets focused. By focus, i mean that the floating label is activated, and the cursor is blinking in it. Also I can't use autofocus, because I combine this with vue, and it removes and adds to dom dynamically. – omega Oct 29 '18 at 23:34
  • @omega - looks like a browser compatibility issue. What browser are you using? Focuses in latest version of Chrome but not in Firefox (will take another look at it in a bit if I get a chance). – benvc Oct 30 '18 at 00:38
  • it seemed to have worked in chrome, but not firefox. – omega Oct 30 '18 at 00:50
  • but in chrome, it works the first time, then when i switch pages, and comes back, its not focused anymore. – omega Oct 30 '18 at 01:18
  • @omega - best I could come up with was to access the `activateFocus` method through the element's `foundation_` property, but this does not actually set focus to the field (it just activates the focus state styling). Answer and snippet edited so you can see what I mean across browsers. Sorry I don't have better news for you. Good luck. – benvc Oct 30 '18 at 03:03
  • Later versions of MDC have resolved the issue. See answer snippet for example. – benvc Apr 20 '20 at 15:05