How do I use document.activeElement with the ShadowDOM polyfill?

[Nik Graf]

I would like to identify if my component is still the active element after a blur event.

Here example code & a use-case to provide more Context:

<polymer-element name="b-secret">
  <template>
    <div>Other things here</div>
    <input id="password-field" type="password" value="{{value}}">
  </template>
  <script type="application/dart" src="secret.dart"></script>
</polymer-element>

A user clicks on a custom input element (b-secret). If you call document.activeElement you will get the custom element (b-secret) for Browsers supporting ShadowDOM. In Firefox (no ShadowDOM support) for example you will get the actual input element (#password-field) inside your component.

While I guess fixing document.activeElement is not really possible I would expected shadowRoot.querySelector('#password-field').hashCode to be the same as document.activeElement.hashCode.

I investigate a bit and recognized that the ShadowDOM shim creates a wrapper object for the queried input field when compiled to JavaScript. The wrapper object is aware of the field's hashCode I'm looking for, but I can't access it through Dart. See the annotated Screenshot: http://cl.ly/image/3F2b1l343O43

You can find the real world example here: https://github.com/blossom/bee/blob/secret-ff-fix/lib/components/secret/secret.dart#L100

[Justin Fagnani]

+w...@dartlang.org, John

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/d7a1192a-4520-4b0d-869f-88c8f524e841%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[John Messerly]

Shadow DOM polyfill can't wrap accessors directly on document, so that's why `document.activeElement` doesn't work. Things like `document.head` have the same problem, see [1]. The usual answer is to introduce a querySelector or some other method call, which kicks in the polyfill. Or you can call: 

ShadowDOMPolyfill.wrap(document.activeElement)

Calling that method from Dart would involve JS interop. I'm not an expert there, but maybe something like: 

// might need a `new JsObject.fromBrowserObject()` around the method arg, not sure

context['ShadowDOMPolyfill'].callMethod('wrap', [document.activeElement]);

[1]: documented here https://github.com/Polymer/ShadowDOM#wrap-and-unwrap

[Rob Dodson]

I think on the PolymerJS side you don't need to include ShadowDOMPolyfill in the call. You should be able to just call wrap(document.activeElement)

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJup4OXw7xwUt5TjB6sodnT6JKV%2B7SKUavK%3Ds25S_goaUza0BQ%40mail.gmail.com.

[Erik Arvidsson]

Rob is right. platform.js adds global wrap and unwrap functions that are noops if the browser supports native shadow dom.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJj5OwCUOQqfJYhaPafZZbaf6pJCGHcBVguYFnKAdLdNUKCSCg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
erik

[Nik Graf]

Works like a charm. Thanks for the help @ Justin, John, Rob & Erik - much appreciated.

This is the final version that worked for me (for the full example see the StackOverflow answer):

bool isActive() {
  var passwordField = $['password-field'];
  var activeElement = js.context.callMethod('wrap', [document.activeElement]);


  // For Browsers with shadow DOM support the shadowRoot.host matches while
  // for Browsers without shadow DOM support the password field match.
  if (activeElement.hashCode != hashCode &&
      activeElement.hashCode != passwordField.hashCode) {
    return false;
  } else {
    return true;
  }
}