Injected Buttercup buttons overwriting existing buttons in JIRA

[jogoodma]

When managing releases in JIRA there is a calendar button that sits to the right of a "Release date" box. When Buttercup is disabled it looks like the image below.

When Buttercup is enabled, this button gets overlaid by the injected Buttercup button completely obscuring and effectively disabling the calendar button. The calendar button is still there in the DOM, but it can't register any pointer events.

There are two issues I see here. One is that Buttercup is incorrectly identifying this field as a password field that it should inject itself into, either because of some odd markup JIRA uses or an issue on the Buttercup side. Two, an existing HTML element in the DOM is being completely obscured by the injected button. These two issues could be an indication of a more general issue with Buttercup or simply a specific conflict with JIRA, I'm not sure which.

HTML snippet with Buttercup disabled.

<div class="field-group">
    <label for="project-config-version-release-form-release-date-field">Release date</label>
    <input id="project-config-version-release-form-release-date-field" name="userReleaseDate" type="text" class="text medium-field" value="">
    <a href="#" id="project-config-versions-release-form-release-date-trigger" title="Select a date">
        <span class="aui-icon aui-icon-small aui-iconfont-calendar icon-default">Select a date</span>
    </a>
</div>

HTML snippet with Buttercup enabled

<div class="field-group">
    <label for="project-config-version-release-form-release-date-field">Release date</label>
    <input id="project-config-version-release-form-release-date-field" name="userReleaseDate" type="text" class="text medium-field" value="" data-bcup="attached" style="width: 141px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
    <a href="#" id="project-config-versions-release-form-release-date-trigger" title="Select a date" data-bcup-haslogintext="no">
        <span class="aui-icon aui-icon-small aui-iconfont-calendar icon-default">Select a date</span>
    </a>
    <button type="button" tabindex="-1" style="margin: 0px; min-width: 0px; min-height: 0px; padding: 0px; position: absolute; width: 24px; height: 30px; left: 286px; top: 4px; border-radius: 0px 3.01667px 3.01667px 0px; background: rgb(0, 183, 172) url(&quot;moz-extension://996a1640-d194-4c2a-936d-c8d70d55d4a6/resources/content-button-background.png&quot;) no-repeat scroll 50% 50% / 12px auto; border: 1px solid rgb(0, 155, 145); cursor: pointer; z-index: 1; outline: currentcolor none medium;" data-bcup-haslogintext="no"></button>
</div>

Browsers tested: Firefox Dev: 65.0b10, Firefox Quantum: 64.0

[perry-mitchell]

Thanks @jogoodma - This is indeed weird.

It seems that because the input has userReleaseDate as the name, it's naively recognising it as a login form. Here's the issue though: Some login forms have only password fields, and some have only username fields, and others both.. This case could have been easily prevented (and probably was in the past) if we checked that the form had both types of fields. This would negatively affect the recognition of other forms that break login up into user + pass stages. So I'm not sure what the solution would be in this regard.

Ideally Atlassian would not use type="text" for a date field and would instead use the correct date type.. but of course this won't be the only occurrence of this happening.

[perry-mitchell]

Would there be any way to easily access such a form @jogoodma? I have access to JIRA myself, and it'd be best to test on this exact page.

[jogoodma]

I have access to JIRA myself, and it'd be best to test on this exact page.

You do or don't have access to JIRA? I unfortunately don't have a way to grant you access to this specific instance. I looked on the Apache Software Foundation's JIRA instance but couldn't find a form that has this problem due to permissions.

This isn't ideal, but Atlassian does have a 7 day trial of the JIRA cloud instance you could sign up for. https://www.atlassian.com/software/jira/try

[perry-mitchell]

I use the cloud version - Atlassian's hosted JIRA. I also couldn't find a form with such a recognised field either 😕

[jogoodma]

To see it you would need to have a project created. Once you have that you can navigate to your project page using the "Projects" menu item in the top nav bar.

Then click on the "Releases" button (a little ship) on the left sidebar.

In the top right you should have a "Manage Versions" button.

That page will have a field called "Start date" that has the issue.