From 8b38027b754d5e0a015736ff7ce95439a598403f Mon Sep 17 00:00:00 2001 From: Steven Brice Date: Tue, 15 Sep 2015 21:37:26 -0500 Subject: [PATCH 1/2] fix(ngClick): prevent soft keyboard from disappearing on input click 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 --- src/ngTouch/directive/ngClick.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/ngTouch/directive/ngClick.js b/src/ngTouch/directive/ngClick.js index f352c252f443..0e55cedf51e7 100644 --- a/src/ngTouch/directive/ngClick.js +++ b/src/ngTouch/directive/ngClick.js @@ -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; @@ -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]; } @@ -158,9 +161,15 @@ ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement', // If we didn't find an allowable region, bust the click. event.stopPropagation(); event.preventDefault(); + + // 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(node !== 'input') { + // Blur focused form elements + event.target && event.target.blur && event.target.blur(); + } - // Blur focused form elements - event.target && event.target.blur && event.target.blur(); } @@ -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') { tapElement.blur(); } From 302e53033fe1fa74ef97c9b83db7572c09a6c3e6 Mon Sep 17 00:00:00 2001 From: Steven Brice Date: Tue, 15 Sep 2015 21:37:26 -0500 Subject: [PATCH 2/2] fix(ngClick): prevent soft keyboard from disappearing on input click 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 --- src/ngTouch/directive/ngClick.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/ngTouch/directive/ngClick.js b/src/ngTouch/directive/ngClick.js index f352c252f443..391a300de5a7 100644 --- a/src/ngTouch/directive/ngClick.js +++ b/src/ngTouch/directive/ngClick.js @@ -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; @@ -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]; } @@ -158,9 +161,15 @@ ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement', // If we didn't find an allowable region, bust the click. event.stopPropagation(); event.preventDefault(); + + // 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') { + // Blur focused form elements + event.target && event.target.blur && event.target.blur(); + } - // Blur focused form elements - event.target && event.target.blur && event.target.blur(); } @@ -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') { tapElement.blur(); }