ISSUE-30265 - Fix product add / remove in Safari when creating an order in admin

[zaximus84]

Description (*)

When creating an order in admin in Safari, adding a product to the order results in an endless load spinner. The page has to be refreshed (and then reflects the added product). Same when removing a product. This PR fixes this behavior in Safari.

Product management works by submitting a form to an iframe. An onload listener is attached to the iframe, and this is what removes the loading spinner and updates the order contents to reflect added or removed products. Commit 499d43d changed the iframe selector in the js to use :last-of-type. This is the underlying problem. Safari fails to find the iframe and attach the onload listener. Removing :last-of-type from the selector, or even wrapping the js in setTimeout with a 1 ms delay fixes the problem.

It looks like this is a timing / sequence issue specific to Safari with regard to DOM render and the use of :last-of-type. I theorize that, because last-of-type examines siblings of the same parent, a query with last-of-type will not properly match elements until the DOM for the parent is complete. Because the js is right after the iframe (within the parent div), the parent DOM is not complete when the js runs.

To solve this, I simply moved the javascript to the bottom of the template, outside the div that wraps the iframe. Safari now locates the iframe on page load and attaches the onload listener as expected.

Fixed Issues (if relevant)

1. Fixes SAFARI: endless deploy when admin try to add product in order #30265

Manual testing scenarios (*)

Using Safari:

1. Go admin - Sales - Create New Order
2. Select any customer from grid
3. Click Add Products
4. Select any Product, enter quantity
5. Click add "selected products to order" button
6. Confirm that the loading spinner only appears for a moment before disappearing, and the product is then reflected in the order.
7. Remove the product and confirm the same result.

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @zaximus84. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s)
  For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE,
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

[ihor-sviziev]

Good catch! 👍let’s run the tests
@magento run all tests

[ihor-sviziev]

@magento run Database Compare, Integration Tests

[ihor-sviziev]

@magento run WebAPI Tests

[gabrieldagama]

Hi @zaximus84, thanks for your contribution! The failed tests aren't related to the changes.

[magento-engcom-team]

Hi @gabrieldagama, thank you for the review.
ENGCOM-8486 has been created to process this Pull Request

[magento-deployment-service]

Hi @engcom-Alfa. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @engcom-Alfa, here is your Magento Instance: https://cf092ed0f5790b456512eb811f6efaa0-2-4-develop.instances.magento-community.engineering
Admin access: https://cf092ed0f5790b456512eb811f6efaa0-2-4-develop.instances.magento-community.engineering/admin_462c
Login: 4e889cce
Password: 2563476852f6

[engcom-Alfa]

@magento give me 2.4-develop instance

[magento-deployment-service]

Hi @engcom-Alfa. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @engcom-Alfa, here is your Magento Instance: https://cf092ed0f5790b456512eb811f6efaa0-2-4-develop.instances.magento-community.engineering
Admin access: https://cf092ed0f5790b456512eb811f6efaa0-2-4-develop.instances.magento-community.engineering/admin_a77a
Login: 305c9b90
Password: 831d8a1b897d

[soleksii]

@magento give me test instance

[magento-deployment-service]

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

[magento-deployment-service]

Hi @stoleksiy, here is your Magento Instance: https://cf092ed0f5790b456512eb811f6efaa0.instances.magento-community.engineering
Admin access: https://cf092ed0f5790b456512eb811f6efaa0.instances.magento-community.engineering/admin_4b2d
Login: b0ee8361
Password: 11b89c41d6f8

[engcom-Alfa]

✔️ QA Passed

Manual testing scenario:

1. Go admin - Sales - Create New Order
2. Select any customer from grid
3. Click Add Products
4. Select any Product, enter quantity
5. Click the add "selected products to order" button

Safari

Before: ✖️ Endless deploy icon appears.

After: ✔️ Product is added to order and removed

Chrome

After: ✔️ Product is added to order and removed

Firefox

After: ✔️ Product is added to order and removed

[m2-assistant]

Hi @zaximus84, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.