🔗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

🔗Example: ally.fix.pointerFocusInput Example

ally.fix.pointerFocusInput Example on jsbin.com

play with the example on jsbin.com or open the source document

🔗Notes

NOTE: 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.

NOTE: Only engaged for Safari and Firefox on Mac OS X (detected via platform.js).

ally.js