Angular Dialogs



  • Product, against all my protestation, has decreed that entry field 3 of our angular app must throw up a dialog when it loses focus in a condition.

    Apparently some moron decided that losing focus is called 'blur'. Fine, I got it working.

    The problem is, I then have to select that field again, because they may not go on if this field is invalid. Calling .focus() on that element does indeed refocus it, but then the dialog comes back, and if you are sufficiently unlucky and click somewhere, you end up with a second one.

    Halp.

    Note that I can only access elements in the TS, but can do that successfully.



  • @magus said in Angular Dialogs:

    Product, against all my protestation

    Protest harder!

    Forced display of a dialog box on loss of focus is a horrible idea.



  • I don't know from Angular, but here's a couple thoughts:

    1. Are you sure the dialog's trigger is only "onblur" and not both "onfocus" and "onblur"?
    2. When you call .focus() after the dialog closes, have you checked to see if the browser also creates a blur event? (I could see .focus() being coded to send blur and then focus if you use it on an element that's already focused. I'm not sure what the W3C spec says on this point.)
    3. Something to keep in mind: when the user clicks (or otherwise activates) a button on the dialog (I'm making a huge ass-pull assumption of what the dialog looks like here), if the text field had previously been focused, it will now be blurred since buttons receive focus when clicked.

    Not sure if any of this helps.



  • @blakeyrat said in Angular Dialogs:

    Something to keep in mind: when the user clicks (or otherwise activates) a button on the dialog (I'm making a huge ass-pull assumption of what the dialog looks like here), if the text field had previously been focused, it will now be blurred since buttons receive focus when clicked.

    Makes sense. I'm trying to apply focusing the field to the handler for the dialog closing, so I would hope that that's not the problem, though that may well be what makes it start doubling.

    @blakeyrat said in Angular Dialogs:

    When you call .focus() after the dialog closes, have you checked to see if the browser also creates a blur event? (I could see .focus() being coded to send blur and then focus if you use it on an element that's already focused. I'm not sure what the W3C spec says on this point.)

    That sounds like it's probably what's happening. I just don't know how to get around it either way.

    @japonicus said in Angular Dialogs:

    Forced display of a dialog box on loss of focus is a horrible idea.

    It ended with a "We don't care. Do it." essentially.



  • @magus said in Angular Dialogs:

    That sounds like it's probably what's happening. I just don't know how to get around it either way.

    Check what time it is and don't respond to the blur event if it's been less than 1 second from the focus call.



  • @ben_lubar Yeah I'd agree, something like that is the best solution. Just set a "global" (aka. scope as small as possible to include both the blur handler and the dialog) and use a SetTimeout to clear it after a second or so.



  • @blakeyrat said in Angular Dialogs:

    @ben_lubar Yeah I'd agree, something like that is the best solution. Just set a "global" (aka. scope as small as possible to include both the blur handler and the dialog) and use a SetTimeout to clear it after a second or so.

    You don't even need a setTimeout, just set the value to the current timestamp and check whether the current timestamp is big enough for it to have been enough time when you need to check.



  • @ben_lubar Okay, so, this seems to have worked. Now I have another problem: I can't reselect the field.

    We're using something that gives us material design things (The inputs are all <input mdInput .../>) for some reason, so we have those fancy inputs where the field label slides into the box when it's inactive as a placeholder. But when I call .focus() on an element, it immediately loses focus again, though the next element gets selected if you press tab.

    This won't work at all, and is probably the cause of the original blur problem problem. Can't even get a good result from Google :/


Log in to reply