Duplicated elements id in checkout. billing-new-address-form

[LiamKarlMitchell]

Preconditions

1. Added Cash on Delivery, Bank Transfer and a custom payment method Payment Express

Magento Version: 2.2.4

Steps to reproduce

1. Load checkout with an item in cart.

Expected result

1. Can view payment methods, choose one and continue to "Place Order"

Actual result

1. [DOM] Found 3 elements with non-unique id #billing-new-address-form: (More info: https://goo.gl/9p2vKq) <fieldset id=​"billing-new-address-form" class=​"fieldset address">​…​</fieldset>​ <fieldset id=​"billing-new-address-form" class=​"fieldset address">​…​</fieldset>​

Error in Google Chrome Version 67.

Unable to pay for the order further with any selected payment method.
"Continue to PxPay", or "Place Order"

This is related to / mentioned in #13415 but was never addressed for the billing-new-address-form and that issue is now closed as done.

[magento-engcom-team]

Hi @LiamKarlMitchell. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• Summary of the issue
• Information on your environment
• Steps to reproduce
• Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento-engcom-team give me {$VERSION} instance

where {$VERSION} is version tags (starting from 2.2.0+) or develop branches (2.2-develop +).
For more details, please, review the Magento Contributor Assistant documentation.

@LiamKarlMitchell do you confirm that you was able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• yes
• no

[LiamKarlMitchell]

@magento-engcom-team give me 2.2.4 instance

[magento-engcom-team]

Hi @LiamKarlMitchell. Thank you for your request. I'm working on Magento 2.2.4 instance for you

[magento-engcom-team]

Hi @LiamKarlMitchell, here is your Magento instance.
Admin access: https://i-17061-2-2-4.engcom.dev.magento.com/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[LiamKarlMitchell]

@magento-engcom-team Yes reproduced.

Although the "Place Order" buttons still appear to work so that must be breaking from something else on my end.

[ghost]

@LiamKarlMitchell, thank you for your report.
We've acknowledged the issue and added to our backlog.

[ihor-sviziev]

Looks like this issue was fixed in #15344

[LiamKarlMitchell]

Thanks I'll check it tomorrow I'm hoping to have this fixed asap :)

It seems the solution is to put a data bind property in for the id, with something added onto it to make it unique. (Such as)

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="billing-address-form" data-bind="fadeVisible: isAddressFormVisible">
    <!-- ko foreach: getRegion('before-fields') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    <form data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
        <fieldset data-bind="attr: {id: 'billing-new-address-form-' + getCode($parent)}" class="fieldset address">
            <!-- ko foreach: getRegion('additional-fieldsets') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
            <!-- ko if: (isCustomerLoggedIn && customerHasAddresses) -->
            <div class="choice field">
                <input type="checkbox" class="checkbox" id="billing-save-in-address-book" data-bind="checked: saveInAddressBook, attr: {id: 'billing-save-in-address-book-' + getCode($parent)}" />
                <label class="label" data-bind="attr: {for: 'billing-save-in-address-book-' + getCode($parent)}">
                    <span data-bind="i18n: 'Save in address book'"></span>
                </label>
            </div>
            <!-- /ko -->
        </fieldset>
    </form>
</div>

But I don't know what kind of follow on effect that might have, if anything else addresses those elements by the id?

[LiamKarlMitchell]

Added code from above as commit just using githubs edit file thing.
checkbox chances from #15344 I just copied it for the fieldset and tweaked.

[ihor-sviziev]

Hi @LiamKarlMitchell,
Could you confirm than issue is fixed for you?

[DanielRuf]

Removing the ID should be sufficient as the ID is nowhere used as far as I can see.

[DanielRuf]

As this is already in 2.2-develop I'llc lose this one.

[LiamKarlMitchell]

Yeah it did fix it thanks.
Just need it as an additional module to back-port for other sites.
Will try just deleting the id.