Skip to content

Latest commit

 

History

History
87 lines (59 loc) · 2.38 KB

pointer-focus-parent.md

File metadata and controls

87 lines (59 loc) · 2.38 KB
layout apiModuleName apiBuiltName
doc-api.html
ally/fix/pointer-focus-parent
ally.fix.pointerFocusParent

ally.fix.pointerFocusParent (ally/fix/pointer-focus-parent)

This Browser Bug Workaround targets an issue in old Blink and WebKit causing focus (by MouseEvent and TouchEvent) to be given to the next parent element accepting focus, rather than the element the event was dispatched to.

Considering the following markup, clicking on the <a> element would focus the <div> instead:

<div tabindex="-1">
  <a href="http://example.org/">Hello World</a>
</div>

Notes

  • NOTE: Only engaged for WebKit (detected via user agent sniffing).

Demo

TODO: figure out how to integrate demo

Usage

<script src="path/to/ally.min.js"></script>
<script>
  // engage the workaround for the entire document
  var handle = ally.fix.pointerFocusParent();
  // disengage the workaround
  handle.disengage();

  // engage the workaround only for a sub-tree
  var handle = ally.fix.pointerFocusParent({
    // context can be: String (query selector), Node, Array of Nodes, NodeList, HTMLCollection
    context: document.getElementById('element-to-fix');
  });
</script>

Using the module instead of the production build:

require([
  'ally/fix/pointer-focus-children'
], function(fixPointerFocusParent) {
  // engage the workaround the entire document
  var handle = fixPointerFocusParent();
  // disengage the workaround
  handle.disengage();

  // engage the workaround only for a sub-tree
  var handle = fixPointerFocusParent({
    // context can be: String (query selector), Node, Array of Nodes, NodeList, HTMLCollection
    context: document.getElementById('element-to-fix');
  });
});

See Getting Started for how to use CommonJS, AMD or ES6 modules.

Related Resources

Contribution Notes

Back to the API Documentation.