Popover has wrong x position (reproducible, with example)

[henrik]

Steps to reproduce:

• Visit http://nyh.name/signup.html (static copy of a real site, to catch the bug). I can see the issue in Chrome, Firefox, Safari on OS X.
• Input "[email protected]" (sic) into the email field
• Hit "tab" or click the "Password" field

Expected a centered drop:

But I get a non-centered drop:

However, if you hit shift+tab, then tab (or click the email field and then back to the password field), the drop is close()d and reopen()ed and then becomes correctly centered.

I started debugging this a bit, but it wasn't obvious to me, and I figured you guys might have some insight.

The interesting parts of the CoffeeScript for that logic is basically (simplified – you can see the full non-minified JS here):

  currentSuggestion = null

  # Show content on email blur.
  $field.blur ->
    $(this).mailcheck EMAIL_DOMAINS,
      suggested: ($element, suggestion) ->
        currentSuggestion = suggestion
        drop.close()  # So `open()` actually calls `content()` again.
        drop.open()

      empty: ($element) ->
        drop.close()

  # The tooltip content.
  # Drop.js calls this method every time before it `open()`s.
  content = (_) ->
    return unless currentSuggestion
    currentSuggestion.someValue

  # Must be called after `content` is defined.
  drop = new Drop
    classes: "drop-theme tooltip tooltip--red"
    target: $field[0]
    content: content
    openOn: null
    position: "bottom center"

[henrik]

I can work around the issue by doing drop.open(); drop.close(); drop.open(), but that's not very elegant :)

[geekjuice]

Hi @henrik. I've actually run into this issue recently and haven't been able to pinpoint the exact cause yet either, but it seems to be an issue with the underlying tethering library, Tether. And unfortunately, we've been using the workaround you mentioned as well for the time being.

While I can't give an exact ETA on when this will be fixed, now that you provided another example of this issue, it should help debug why this is occurring. Once it's fixed, I'll mention you on the commit or this issue to let you know ASAP.

And thanks again for using Drop and helping us find issues like this :smile:

[henrik]

Thanks so much for the quick reply! Great that you're on it :)

[k-fish]

I've run into a similar issue with drop before, and it was due to the fact that width of the element wasn't properly defined for the object when drop was looking at it (DOM issue). Like geekjuice said it is a problem with tether (although I forget what it was exactly because I had this issue a while ago and my memory is fuzzy). This may or may not be your issue, but the fact that you said that drop.open(); drop.close(); drop.open() works makes me think it might be.

[henrik]

@k-fish: Thank you. Yeah, could be that. There's a lot of responsive percentage widths and such going on which perhaps means that the actual width isn't available initially. The new Drop runs immediately when the DOM is ready. If it calculates size then, and doesn't wait for the open() (which runs far later, when you blur the email field) it seems quite possible that the width isn't settled yet.

[geekjuice]

@henrik Sorry for the delay. Is this still and issue with the new versions of Drop and Tether? Having trouble reproducing the issue these days and wondering if it was still an issue on your end as well.

If so, it'd be great if you could share a jsFiddle or Codepen so I can debug the issue a little more easily. Thanks :smiley_cat:

[jrtashjian]

I recently ran into a similar issue with position when toggling. I was able to fix it by using opacity to show/hide the element rather than display: block/none.

Using display: block/none works but it's off center like in the example screenshot you posted. After scrolling the page it seems to reposition itself properly. I think it has something to do with the size calculation and how the library determines the anchor point.

[zackbloom]

I believe the issue is as simple as, if the element's position isn't available yet, Tether can't calculate how it should be positioned. The general solution is to make sure the element is being rendered (not display: none), and has been painted (grab it's innerWidth or the like), before positioning it.

On Mon, Nov 23, 2015 at 11:32 AM, JR Tashjian [email protected] wrote:

I recently ran into a similar issue with position when toggling. I was able to fix it by using opacity to show/hide the element rather than display: block/none.

Using display: block/none works but it's off center like in the example screenshot you posted. After scrolling the page it seems to reposition itself properly. I think it has something to do with the size calculation and how the library determines the anchor point.

— Reply to this email directly or view it on GitHub https://github.com/HubSpot/drop/issues/55#issuecomment-158988495.

[eemreavci]

I've ran into the same issue recently and I believe the best way to solve this would be to add a new event (beforeOpen) that can be used to pre-load data or do anything else that will change the width of the dropdown.

[ghost]

This is @henrik again (at work). The issue seems to have gone away after upgrading tether-drop to 1.4.1. At least on one page that had the issue.

[ghost]

I spoke too soon! On one page, we were able to remove the workaround. On another, we couldn't, or we got the exact same issue where the tooltip wasn't horizontally centered.