Uploaded image for project: 'Bitbucket Data Center'
  1. Bitbucket Data Center
  2. BSERV-3914

BranchSelectorField doesn't work when appended to an intermediate non-DOM element with jQuery

          [BSERV-3914] BranchSelectorField doesn't work when appended to an intermediate non-DOM element with jQuery

          Turns out this is definitely a jQuery bug. It's been fixed in newer versions of jQuery. Here's a test case that fails in 1.8.3 and succeeds in latest: http://jsbin.com/orobEfE/2/edit

          xtjhin who responded to you on Answers has written a workaround in Stash that fixes it as long as there is no setTimeout between when you append the script tag to an element and when you actually insert it into the DOM. As long as you render it in the same event loop that you append it to the DOM, you'll be fine (once his fix is released). We expect his fix to be in the next 2.8.x bug fix release if we release one or in 2.9 if we don't.

          To fix it in all cases, we need to update jQuery. Unfortunately, our version of jQuery is heavily tied to our version of the Atlassian cross-product library called AUI. I have raised a bug to keep them aware of this issue. Once they've updated their version of jQuery, we can consume it to fix this in all cases.

          I'm closing this issue as Fixed, but I wanted to keep you aware of this caveat.

          Cheers,
          Adam

          Adam Ahmed (Inactive) added a comment - Turns out this is definitely a jQuery bug. It's been fixed in newer versions of jQuery. Here's a test case that fails in 1.8.3 and succeeds in latest: http://jsbin.com/orobEfE/2/edit xtjhin who responded to you on Answers has written a workaround in Stash that fixes it as long as there is no setTimeout between when you append the script tag to an element and when you actually insert it into the DOM. As long as you render it in the same event loop that you append it to the DOM, you'll be fine (once his fix is released). We expect his fix to be in the next 2.8.x bug fix release if we release one or in 2.9 if we don't. To fix it in all cases, we need to update jQuery. Unfortunately, our version of jQuery is heavily tied to our version of the Atlassian cross-product library called AUI. I have raised a bug to keep them aware of this issue. Once they've updated their version of jQuery, we can consume it to fix this in all cases. I'm closing this issue as Fixed, but I wanted to keep you aware of this caveat. Cheers, Adam

          Hi Dana and Alexey,

          One of the other developers here looked into this and found the issue.

          We initialize the widget with a script tag. Normally script tags are executed only when they enter the DOM, but jQuery does something a bit strange. I'm not sure I want to classify it as a jQuery bug yet, but it's certainly a jQuery quirk if nothing else. jQuery will execute the script as soon as you append it to any other element, even if that other element isn't actually in the DOM.

          The way Dialogs work when you add a Panel is that they append your content to a div that isn't yet in the DOM, so it triggers the above quirk and the initialization script is executed too soon. We're currently planning to add a setTimeout to the initialization which doesn't actually fix the general problem, but fixes it for Dialog panels.

          In the meantime, I'd suggest manually adding the Branch Selector Field content to the panel only after the panel is created. By that point the element is in the DOM and the script will initialize correctly. Something like

          dialog.addPanel("", "", 'panel-body');
          dialog.popup.element.find('.panel-body').html(panelContent);
          dialog.show();
          

          Adam Ahmed (Inactive) added a comment - Hi Dana and Alexey, One of the other developers here looked into this and found the issue. We initialize the widget with a script tag. Normally script tags are executed only when they enter the DOM, but jQuery does something a bit strange. I'm not sure I want to classify it as a jQuery bug yet, but it's certainly a jQuery quirk if nothing else. jQuery will execute the script as soon as you append it to any other element, even if that other element isn't actually in the DOM. The way Dialogs work when you add a Panel is that they append your content to a div that isn't yet in the DOM, so it triggers the above quirk and the initialization script is executed too soon. We're currently planning to add a setTimeout to the initialization which doesn't actually fix the general problem, but fixes it for Dialog panels. In the meantime, I'd suggest manually adding the Branch Selector Field content to the panel only after the panel is created. By that point the element is in the DOM and the script will initialize correctly. Something like dialog.addPanel( "", " ", 'panel-body' ); dialog.popup.element.find( '.panel-body' ).html(panelContent); dialog.show();

          Alexey Efimov added a comment - - edited

          Hello, it's a blocker for us.

          Alexey Efimov added a comment - - edited Hello, it's a blocker for us.

            xtjhin Joshua Tjhin (Inactive)
            6954e0c50e7f Dana
            Affected customers:
            1 This affects my team
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved: