Vex modals not working as expected

[vchatterji]

IMPORTANT: Please provide a sample using http://plnkr.co/edit/iiQett?p=preview

• I'm submitting a ...
  [*] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
• Do you want to request a feature or report a bug?
• What is the current behavior?

http://plnkr.co/edit/6radRdh9NvZOQJh7SWb2?p=preview

In the Vex theme (even on your demo page), when a modal container opens, a blue outline of the final dialogue position shows up first and then the dialogue is animated into the container.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/iiQett?p=preview).

Please see:
http://shlomiassaf.github.io/angular2-modal#/vex-demo

• What is the expected behavior?

Dialogue should be placed and animate correctly

• What is the motivation / use case for changing the behavior?

Functionality is not working properly

• Please tell us about your environment:
• Angular version: 2.0.0-rc.2
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[shlomiassaf]

I think the blue border is actually the focus element, I think it sets the focus and run's the animation on the same VM turn.

This doesn't happen in FireFox on my mac but it does on Chrome.

I don't know if it's an issue with Chrome or the animation module in angular 2.
A workaround is to set the focus once the animation ends, but that's not something I want to do...

It disappear once you click anywhere, even lets say on the developer console. It implies that some sort of refresh is missing on chrome or Angular animation.

I'll try to investigate.

EDIT: Not related to animation module in angular, this is pure CSS animations.

[vchatterji]

It happens on Safari as well.

[shlomiassaf]

pushed a workaround.

The focus management is basic at this point, a practical implementation will be to identify elements on the dialog and set the focus on the right one.

For example, if it's a prompt focus the input, otherwise focus the last button (e.g: OK) otherwise focus the dialog window.

This requires a central unit to manage focus having children publishing to it since a child component has reference to it's elements... then it needs to prioritise it and decide... not so simple :)