switcherConfig stops working in admin customer address edit modal

[xtremevision]

switcherconfig_test_module.zip

Preconditions and environment

• Magento open source version 2.4.4 and 2.4.6
• nginx
• elasticsearch
• MariaDB 10.4.25
• php 8.1
• A customer record with an address
• Install attached module to reproduce issue

Steps to reproduce

1. Install attached module
2. Login to admin backend
3. Edit a customer
4. Edit the customer's address
5. Click field1 once or twice to see the hide/show effect (rules)
6. Close the modal
7. Edit the address again
8. Click field1 once or twice - hide/show rules no longer work (nor on page load either)

See attached recording.

Veronica.Costello._.Customers._.Customers._.Magento.Admin.webm

Expected result

The switcherConfig should work every time the modal is opened to add or edit an address.

Actual result

switcherConfig stop working after the modal is first closed. Subsequent openings no longer execute the switcherConfig rules.
There are no JS console or system/exception log errors that I can see.

Additional information

It has happens in the customer address form for both add or edit addresses.

Release note

No response

Triage and priority

• Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

[m2-assistant]

Hi @xtremevision. Thank you for your report.
To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce.

• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this
• To learn more about issue processing workflow, refer to the Code Contributions.

---

Join Magento Community Engineering Slack and ask your questions in #github channel.
⚠️ According to the Magento Contribution requirements, all issues 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 issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[xtremevision]

From what I can tell static/version1737174762/adminhtml/Magento/backend/en_US/Magento_Ui/js/form/switcher.js function

        /**
         *
         * @param {Object} rule - Rules object.
         * @param {*} value - Current value associated with a rule.
         */
        onValueChange: function (rule, value) {
            this.applyRule(rule, value);
        }

does not execute anymore. Not sure yet why but the onChange event is not firing anymore. Could there be a ko binding problem?

[xtremevision]

I would be more than happy to reproduce the issue on a vanilla Magento but I don't know how to request the instance with my module installed. Is it possible?

[smartexcan]

I'm pretty sure I know why this is happening.
The switcher object for the field is not destroyed/cleaned up when the form is destroyed and re-rendered.

You can test this in your browser (with the test module installed):

1. open the modal for the first time, with the switcher working.
2. close the modal.
3. run the following in the console: require('uiRegistry').remove('customer_address_form.customer_address_form.general.field1_switcher')
4. open the modal again, the switcher should be working again.

You can use this mixin as a temporary fix:
(file paths are listed in comments for the files, update the vendor/module parts as needed)
https://gist.github.com/smartexcan/c4f3ee62e14b251a9c09cacf4943bc3b

I made a pull request for this almost a year ago that hasn't been looked at yet lol
#37512

[xtremevision]

Perhaps I am missing something but it's not working, see console in screenshot.

[smartexcan]

Ah right, it doesn't have a destroy method (which is the problem).

try the following:

require('uiRegistry').remove('customer_address_form.customer_address_form.general.field1_switcher')
and replace general and field1 with whatever your fieldset and field names are

[xtremevision]

This worked

require('uiRegistry').remove('customer_address_form.customer_address_form.general.field1_switcher')

Well done!

[xtremevision]

I'll use a composer patch for now to get this working as I have custom module pending that can't be finished due to this bug. Thanks @smartexcan !

[xtremevision]

@smartexcan I've just tested it with composer patches, works like a charm! Well done my friend. :)

For anyone wanting the patches until the PR is merged:

index ce0dd038bc736..9410e5a7a134e 100644
--- a/view/base/web/js/form/element/abstract.js
+++ b/view/base/web/js/form/element/abstract.js
@@ -11,8 +11,9 @@ define([
     'mageUtils',
     'uiLayout',
     'uiElement',
-    'Magento_Ui/js/lib/validation/validator'
-], function (_, utils, layout, Element, validator) {
+    'Magento_Ui/js/lib/validation/validator',
+    'uiRegistry'
+], function (_, utils, layout, Element, validator, registry) {
     'use strict';
 
     return Element.extend({
@@ -483,6 +484,16 @@ define([
             }
 
             return id;
+        },
+
+        /**
+         * Destroy switcher element instance if enabled.
+         */
+        destroy: function () {
+            if (this.switcherConfig.enabled) {
+                registry.async(this.switcherConfig.name)('destroy');
+            }
+            this._super();
         }
     });
 });

and

index 46c1bd63d8808..2ff9f1301023b 100644
--- a/view/base/web/js/form/switcher.js
+++ b/view/base/web/js/form/switcher.js
@@ -115,6 +115,13 @@ define([
          */
         onValueChange: function (rule, value) {
             this.applyRule(rule, value);
+        },
+
+        /**
+         * Destroys current instance.
+         */
+        destroy: function () {
+            registry.remove(this.name);
         }
     });
 });