Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
fix(ngClick): prevent soft keyboard from disappearing on input click
Browse files Browse the repository at this point in the history
Currently ngClick calls blur on all elements and this causes keyboards
on touch devices to bounce and sometimes not appear. This is a fix
for #11358 and should allow input fields to keep the keyboard visible
without bouncing in and out of view or never appearing.

Closes #11358
  • Loading branch information
steven10172 committed Sep 16, 2015
1 parent 9e6a9b9 commit 169c321
Showing 1 changed file with 15 additions and 5 deletions.
20 changes: 15 additions & 5 deletions src/ngTouch/directive/ngClick.js
Expand Up @@ -125,6 +125,9 @@ ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement',
return; // Too old.
}

// Get the node name of the target
var nodeName = nodeName_(event.target);

var touches = event.touches && event.touches.length ? event.touches : [event];
var x = touches[0].clientX;
var y = touches[0].clientY;
Expand All @@ -144,7 +147,7 @@ ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement',
lastLabelClickCoordinates = null;
}
// remember label click coordinates to prevent click busting of trigger click event on input
if (nodeName_(event.target) === 'label') {
if (nodeName === 'label') {
lastLabelClickCoordinates = [x, y];
}

Expand All @@ -159,8 +162,14 @@ ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement',
event.stopPropagation();
event.preventDefault();

// Blur focused form elements
event.target && event.target.blur && event.target.blur();
// Check if the target node is not of the type input.
// All targets should be blurred except input to prevent the keyboard from
// bouncing in and out and sometimes not showing.
if (nodeName !== 'input' && nodeName !== 'textarea') {
// Blur focused form elements
event.target && event.target.blur && event.target.blur();
}

}


Expand Down Expand Up @@ -255,7 +264,9 @@ ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement',
// Blur the focused element (the button, probably) before firing the callback.
// This doesn't work perfectly on Android Chrome, but seems to work elsewhere.
// I couldn't get anything to work reliably on Android Chrome.
if (tapElement) {
// Make sure the tapElement isn't of type input to prevent the keyboard from
// bouncing and possibly not showing without a few attempted clicks.
if (tapElement && nodeName_(tapElement) !== 'input' && nodeName_(tapElement) !== 'textarea') {
tapElement.blur();
}

Expand Down Expand Up @@ -293,4 +304,3 @@ ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement',

};
}]);

0 comments on commit 169c321

Please sign in to comment.