Customer & Product Tax class wrongly styled

[duckchip]

I'm having a weird issue on the production environment of one of our webshops. The styling of the Customer & Product Tax class UI components are getting the styling of the tax rate UI component.
This results in a problem with saving the newly selected customer & product class changes. It just selects the corresponding rows from the Tax rate UI component, found at the top of the page.

No modifications to the backend theme were made.

Preconditions

1. Magento CE 2.2.1
2. PHP 7.0.17

Steps to reproduce

1. Create a new Tax rule
2. See that the styling of the Customer & Product Tax class ui components are incorrect

Expected result

1. The correct styling.
   

Actual result

[magento-engcom-team]

@duckchip, thank you for your report.
The issue is already fixed in 2.2.2

[hostep]

This is still an issue in Magento 2.2.2, even though it is really hard to consistently reproduce this.
You can try refreshing that page a couple of times, throw in a cache:flush from time to time, and keep refreshing, and after a while you'll see it popup. I fail to reproduce it on a local environment, it only happens on an actual production server. I have the feeling some javascript code is being loaded faster then some other javascript code, and the incorrect order of execution causes this problem.

What's even more scary, is that when this problem occurs, and you scroll down in the tax rates to the end, and it loads the second page of tax rates, it then inserts those rates in both the 'tax rates', 'customer tax class' and 'product tax class'. I have the feeling those 3 ui components somehow get connected due to the incorrect execution of javascript mentioned above.

Here are some screenshots of this:

Before scrolling down in the tax rates:

After scrolling down in the tax rates:

Notice that the tax rates got inserted in the customer tax classes, and also in the product tax classes (which isn't visible in the screenshot).

@magento-engcom-team: I'm re-opening this ticket if that's ok for you.
Can you try to reproduce this and figure out what causes this, because it is really annoying as you can imagine :)

Thanks!

[hostep]

Also when the first issue occurred like @duckchip reports, selecting for example the third value in 'customer tax class' and saving the tax rule, causes the third 'tax rate' to be selected instead of the 'customer tax class' and the wrong value is being saved to the database, which is really incorrect behaviour!

[hostep]

@magento-engcom-team: I found a way to easily reproduce this on a local environment by forcing some javascript code to be executed with some extra delay. If you modify the file: app/code/Magento/Tax/view/adminhtml/templates/rule/edit.phtml and apply this diff:

diff --git a/app/code/Magento/Tax/view/adminhtml/templates/rule/edit.phtml b/app/code/Magento/Tax/view/adminhtml/templates/rule/edit.phtml
index d16c4faeede..cfdba745136 100644
--- a/app/code/Magento/Tax/view/adminhtml/templates/rule/edit.phtml
+++ b/app/code/Magento/Tax/view/adminhtml/templates/rule/edit.phtml
@@ -18,6 +18,14 @@ require([
     'Magento_Ui/js/modal/modal'
 ], function($, alert){

+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async function hack()
+    {
+        await sleep(2000);
+
     $.widget("adminhtml.dialogRates", $.mage.modal, {
         options: {
             itemRate: {},
@@ -296,5 +304,10 @@ require([
     };

     window.TaxRateEditableMultiselect = TaxRateEditableMultiselect;
+
+    }
+
+    hack();
+
 });
 </script>

Then refresh the Edit Tax Rule page, you'll see the issue popping up.

Debugging a bit further: by putting the line: taxRate.multiselect2(options); in comments, the issue is solved, yet the tax rates aren't being rendered in that nice multiselect thingamajig.
Even further debugging: when I step through the lib/web/mage/multiselect.js file, I can see that the this.$container variable contains 3 elements: the 'tax rate', 'customer tax class' and 'product tax class' select elements. Here it should only contain the very first one, not all of them!

I'll see if I can find a way to fix this somehow, but I'm not sure if I'm going to find something yet.

I'm removing the Fixed in 2.2.x and G3 Passed labels, as I want you guys to re-evaluate this issue (I'm not sure if this is the workflow we should follow, so if I'm mistaken here, please let me know)