ngx-material-keyboard / angular-material-keyboard

Onscreen virtual keyboard for Angular (https://angularjs.org/) using Material (https://material.angularjs.org/) and the Angular Virtual Keyboard by the-darc (https://github.com/the-darc/angular-virtual-keyboard) based on GreyWyvern VKI (http://www.greywyvern.com/code/javascript/keyboard).
http://davidenke.github.io/angular-material-keyboard/
MIT License
15 stars 19 forks source link

Keyboard disappears when clicking a key #11

Open daweedm opened 7 years ago

daweedm commented 7 years ago

Hello,

First of all, thanks for your work !

I'm facing an issue (using ionic 1.3.1, angular 1.5.3, ngAnimate 1.5.3, ngAria 1.5.3 and the latest version of your plugin and Google Chrome)

The keyboard directly disappears when I click on whatever button present on it. But it keep itself visible when I click on a key then drag the mouse out of the pressed key. It seems that when the event "mousedown" is sent to a key of the keyboard, it close automatically.

How can I solve this problem ?

Regards, David

davidenke commented 7 years ago

There's probably an issue with the focus / blur events. I never tested it with AngularJS after 1.4. And since I started working on a complete rework for Angular 4 I have no time to test it appropriate.

So pull requests are very welcome :)

daweedm commented 7 years ago

Ok ! thanks for your quick response :) If I find a solution I will make a PR

oroc commented 7 years ago

Hello daweedm, I am experiencing the same issue using it with ionic. Please did you find any solution to this issue? Thanks.

oroc commented 7 years ago

Hey I found a solution. I declaratively refocus the element in my controller using ng-change to trigger a function whenever any key is pressed.

--VIEW <input type="text" use-keyboard="Deutsch" ng-model="myModel" id="myInput" ng-change="refocus()">

//--CONTROLLER .controller("MyCtrl",["$scope", "focus", function(){ $scope. refocus = function() { $timeout(function() {focus('myInput');}); }])

//--SERVICE .factory('focus', function($timeout, $window) { return function(id) { // timeout makes sure that is invoked after any other event has been triggered. // e.g. click events that need to run before the focus or // inputs elements that are in a disabled state but are enabled when those events // are triggered. $timeout(function() { var element = $window.document.getElementById(id); if(element) element.focus(); }); }; })