Multiple suggested addresses list items rendered
Closed this issue · 2 comments
Prerequisites
- Are you running the latest version of our extension?
- Have you reviewed our integration guide?
- Did you search through existing issues?
Description
We use the default Magento Onepage checkout that is customized a bit. When using the module with this checkout it renders the suggested address list items multiple times (on the first render). After changing the address it renders even more list items.
The problem originates from the rearrangeSteps function. This function is called multiple times and causes the multiple "Suggested Addresses" to be shown. When I edit this function to only run once, the issue doesn't occur anymore.
This leads to the following question: why is this function called on the afterRender of the option the the Knockout template? And why is this function called on quote.shippingMethod.subscribe? It would be logical that the rearrangeSteps function is only called once on init, right?
I'm guessing this is some kind of race condition where the element is moved while a update is in progress. Maybe the element should be in the right place so the whole rearrangeSteps function wouldn't be needed?
Steps to Reproduce
- Go to the checkout
- Fill out all the address fields
- See the "Suggested Addresses" rendered multiple times.
- Change one of the address fields
- See the "Suggested Addresses" rendered more times.
Expected Result
Only one "Suggested Addresses" element.
Actual Result
Multiple "Suggested Addresses" elements on initial load and more added with every address change.
Versions
- Magento 2.4
- Magento 2.3
- Magento 2.2
- Magento 2.1
- Magento Open Source (CE)
- Magento Commerce (EE)
- Magento B2B
- Magento Cloud
- PHP 7.x
- PHP 5.x
And a video recording of the issue: https://d.pr/v/fwYuwQ
Some screenshots as well:
Initial load with preloaded address of the customer
Shows three "Suggested Addresses" blocks
After changing the postal code
Shows six "Suggested Addresses" blocks
Found the issue! It was a inline svg that had a shipping id on a g element. So the jQuery('#shipping, .onestep-shipping-address') selector returned two elements and the messed up everything.
I think it would still be nice of the whole component could be loaded by adding the KO component to the checkout layout instead of moving it with jQuery, that would also make things easier if you ever want to include the module in another checkout.