# ally.fix.pointerFocusInput
This Browser Bug Workaround targets an issue in Safari and Firefox on Mac OS X, where focus would not be given to certain form elements upon mousedown. This is not a browser bug, it is desired behavior by the OSX platform. Use this feature only if you require the elements to receive focus (e.g. for custom styling).
# Description
In Firefox for Mac, Chrome and Safari, some types of form field don’t take the focus at all when clicked with the mouse; this behavior is limited to fields which have no typed input, such as radios, checkboxes, buttons, color-pickers and sliders. -- When Do Elements Take the Focus?
# Usage
// engage the workaround for the entire document
var handle = ally.fix.pointerFocusInput();
// disengage the workaround
handle.disengage();
// engage the workaround only for a sub-tree
var handle = ally.fix.pointerFocusInput({
context: '#element-to-fix',
});
# Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| context | <selector> |
document |
The scope of the DOM in which to apply the fix. All elements of the collections are used. |
# Returns
A <service> interface, providing the handle.disengage() method to stop the service.
# Examples
# ally.fix.pointerFocusInput Example
play with ally.fix.pointerFocusInput Example on jsbin.com or open the document of ally.fix.pointerFocusInput Example
# Changes
- Since
v1.1.0nested elements of<button>and<label>are targeted properly. - In
v1.3.0theelement.prototype.matcheswas replaced byutil/element-matches.
# Notes
In Firefox the <label> element causes form fields to get focus upon being clicked, even if the form field itself would not get focus because of the ominous platform conventions.
Only engaged for Safari and Firefox on Mac OS X (detected via platform.js).