Blinking text cursor overlapping with div

[jmayday]

Hi,

there's a IE bug affecting jhipster layout (please see screenshot). I'm wondering what is the best way to fix it. Idea for now is to postphone the focus a little bit and update login.controller.js code: $timeout(function () {angular.element('#username').focus();}, 600); (added 600 ms delay)

In those 600 ms animation for login popup ends and input field gets correctly focused. But what in case animation settings are changed? Could we improve this code to be executed exactly when animation ends? (without hardcoding values like '600'?) What do you think?

Link to bug description: https://connect.microsoft.com/IE/feedback/details/841043/blinking-text-cursor-overlapping-with-div

[jmayday]

Let's be more precise. Together with my teammate we've worked out some better solution. It's still a workaround, not a real fix.

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
       -o-transform: translate(0, -25%);
          transform: translate(0, -25%);
}

This is CSS responsible for animation.

What about extracting time to constant

(function () {
    'use strict';
    angular
        .module('yourApp')
        .constant('MODAL_FADE', 300)
    ;
})();

And then in login.service.js:

modalInstance.rendered
    .then(function () {
        $timeout(function () {
            angular.element('#username').focus();
        }, MODAL_FADE);
    });

[deepu105]

A better option would be to check if the field is visible before focusing which is possible using the visibility property

Thanks & regards, Deepu On 21 Jul 2016 15:12, "Jakub" notifications@github.com wrote:

Let's be more precise. Together with my teammate we've worked out some better solution. It's still a workaround, not a real fix.

.modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); }

This is CSS responsible for animation.

What about extracting time to constant

(function () { 'use strict'; angular .module('yourApp') .constant('MODAL_FADE', 300) ; })();

And then in login.service.js: modalInstance.rendered.then(function () { $timeout(function () { angular.element('#username').focus(); }, MODAL_FADE); });

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/3855#issuecomment-234206152, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF1vEVJFkBl6HaLgqVaHacEQTHtUBks5qXz7ngaJpZM4JQynd .

[jmayday]

I do not understand how this could fix the problem. Could you provide some code?

[jdubois]

We're using "normal" AngularJS+Bootstrap here, is this really a JHipster bug, or a AngularJS/Bootstrap bug? I don't understand how we could have added a bug here, we're using both frameworks in a quite simple way.

[deepu105]

Its a very minor issue affecting only IE. Ill try to fix it later

Thanks & regards, Deepu On 22 Jul 2016 01:11, "Julien Dubois" notifications@github.com wrote:

We're using "normal" AngularJS+Bootstrap here, is this really a JHipster bug, or a AngularJS/Bootstrap bug? I don't understand how we could have added a bug here, we're using both frameworks in a quite simple way.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/3855#issuecomment-234361355, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF9fn7cvEkm24iPmtVWDdQUilNAGVks5qX8tNgaJpZM4JQynd .

[jmayday]

I'm not claiming that you introduced the bug. But if there is code to make username input focused why not make it IE compatible? I know, IE sucks and developing 'IE compatible' features is annoying because it's always about workarounds. Idea I shared contains less than 20 extra lines of code. Probably it's possible to make it even more compact.

Anyway, I'm not forcing anyone to introduce this workaround in jhipster code. At least if someone needs solution to this problem - workaround is here. Regards, jmayday

[jdubois]

It's not what I mean @jmayday -> if the bug comes from Bootstrap, we should correct it in Bootstrap, not JHipster. We always report the bugs we find to the library which introduces them: if we have a fix here, it should be temporarily in JHipster, until it is solved in the library.

[jmayday]

This seem to be IE specific issue: (https://connect.microsoft.com/IE/feedback/details/841043/blinking-text-cursor-overlapping-with-div) demo: http://jsfiddle.net/6WVxf/5/

[jdubois]

If this is a Bootstrap or AngularJS bug, we first should try to correct the issue in those frameworks. We can have temporarily the fix in JHipster, of course, but in the end the idea is that we contribute back the issues we find to the underlying projects. We're also supposed to have some "simple" Bootstrap code, so this is the kind of thing I would like to avoid, if possible.

[deepu105]

this is a very very minor issue affecting only IE users that too the functionality is not affected its just a visual glitch, and hence IMO we shouldnt do this workaround. we can just document it here.