Fix issue when can't remove layout update after add during new widget creation

app/code/Magento/Widget/Test/Mftf/ActionGroup/AdminCreateWidgetWthoutLayoutActionGroup.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="AdminCreateWidgetWthoutLayoutActionGroup">
+        <annotations>
+            <description>Goes to the Admin Widget creation page without saving it</description>
+        </annotations>
+        <arguments>
+            <argument name="widget"/>
+        </arguments>
+        <amOnPage url="{{AdminNewWidgetPage.url}}" stepKey="amOnAdminNewWidgetPage"/>
+        <selectOption selector="{{AdminNewWidgetSection.widgetType}}" userInput="{{widget.type}}" stepKey="setWidgetType"/>
+        <selectOption selector="{{AdminNewWidgetSection.widgetDesignTheme}}" userInput="{{widget.design_theme}}" stepKey="setWidgetDesignTheme"/>
+        <click selector="{{AdminNewWidgetSection.continue}}" stepKey="clickContinue"/>
+        <fillField selector="{{AdminNewWidgetSection.widgetTitle}}" userInput="{{widget.name}}" stepKey="fillTitle"/>
+        <selectOption selector="{{AdminNewWidgetSection.widgetStoreIds}}" userInput="{{widget.store_ids[0]}}" stepKey="setWidgetStoreIds"/>
+        <click selector="{{AdminNewWidgetSection.addLayoutUpdate}}" stepKey="clickAddLayoutUpdate"/>
+    </actionGroup>
+</actionGroups>

app/code/Magento/Widget/Test/Mftf/ActionGroup/AdminWidgetAddLayoutUpdateActionGroup.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="AdminWidgetAddLayoutUpdateActionGroup">
+        <annotations>
+            <description>Add layouts during widgets creation</description>
+        </annotations>
+        <waitForAjaxLoad stepKey="waitForLoad"/>
+        <click selector="{{AdminNewWidgetSection.addLayoutUpdate}}" stepKey="clickAddLayoutUpdate"/>
+    </actionGroup>
+</actionGroups>

app/code/Magento/Widget/Test/Mftf/ActionGroup/AdminWidgetDeleteLayoutUpdateActionGroup.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="AdminWidgetDeleteLayoutUpdateActionGroup">
+        <annotations>
+            <description>Delete layouts during widgets creation</description>
+        </annotations>
+        <click selector="{{AdminNewWidgetSection.deleteWidgetLayoutAction}}" stepKey="clickFirstDeleteButton"/>
+    </actionGroup>
+</actionGroups>

app/code/Magento/Widget/Test/Mftf/Section/AdminNewWidgetSection.xml

@@ -52,6 +52,8 @@
         <element name="displayPageControl" type="select" selector="[name='parameters[show_pager]']"/>
         <element name="numberOfProductsToDisplay" type="input" selector="[name='parameters[products_count]']"/>
         <element name="cacheLifetime" type="input" selector="[name='parameters[cache_lifetime]']"/>
+        <element name="deleteWidgetLayoutAction" type="button" selector="#page_group_container > div:first-of-type > div.fieldset-wrapper-title > div > .action-default.action-delete"/> 
+        <element name="CountDeleteButtons" type="button" selector="#page_group_container > .fieldset-wrapper.page_group_container > div.fieldset-wrapper-title > div > .action-default.action-delete"/>
     </section>
 </sections>
 

app/code/Magento/Widget/Test/Mftf/Test/AdminWidgetAddAndDeleteMultipleLayoutSectionsTest.xml

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
+    <test name="AdminWidgetAddAndDeleteMultipleLayoutSectionsTest">
+        <annotations>
+            <features value="Widget"/>
+            <stories value="Add and Delete multiple layouts when creating a Widget"/>
+            <title value="Add and Delete multiple layouts"/>
+            <description value="Admin should be able to Add and Delete multiple layouts"/>
+            <severity value="CRITICAL"/>
+            <group value="Widget"/>
+        </annotations>
+        <before>
+            <actionGroup ref="AdminLoginActionGroup" stepKey="LoginAsAdmin"/>
+        </before>
+        <after>
+            <actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
+        </after>
+        <actionGroup ref="AdminNavigateMenuActionGroup" stepKey="navigateToContentWidgetsPageFirst">
+            <argument name="menuUiId" value="{{AdminMenuContent.dataUiId}}"/>
+            <argument name="submenuUiId" value="{{AdminMenuContentElementsWidgets.dataUiId}}"/>
+        </actionGroup>
+        <actionGroup ref="AdminAssertPageTitleActionGroup" stepKey="seePageTitleFirst">
+            <argument name="title" value="{{AdminMenuContentElementsWidgets.pageTitle}}"/>
+        </actionGroup>
+        <waitForLoadingMaskToDisappear stepKey="waitForLoadingMaskToDisappear1"/>
+        <actionGroup ref="AdminCreateWidgetWthoutLayoutActionGroup" stepKey="addWidgetForTest">
+            <argument name="widget" value="ProductsListWidget"/>
+        </actionGroup>
+        <actionGroup ref="AdminWidgetAddLayoutUpdateActionGroup" stepKey="AddSecondLayout"/>
+        <actionGroup ref="AdminWidgetAddLayoutUpdateActionGroup" stepKey="AddThirdLayout"/>
+        <seeNumberOfElements userInput="3" selector="{{AdminNewWidgetSection.CountDeleteButtons}}" stepKey="seeThreeDeleteButtons"/>
+        <actionGroup ref="AdminWidgetDeleteLayoutUpdateActionGroup" stepKey="DeleteFirstLayoutForWidget"></actionGroup>
+        <seeNumberOfElements userInput="2" selector="{{AdminNewWidgetSection.CountDeleteButtons}}" stepKey="seeTwoDeleteButtons"/>
+        <actionGroup ref="AdminWidgetDeleteLayoutUpdateActionGroup" stepKey="DeleteSecondLayoutForWidget"></actionGroup>
+        <seeNumberOfElements userInput="1" selector="{{AdminNewWidgetSection.CountDeleteButtons}}" stepKey="seeOneDeleteButtons"/>
+        <actionGroup ref="AdminWidgetDeleteLayoutUpdateActionGroup" stepKey="DeleteThirdLayoutForWidget"></actionGroup>
+        <seeNumberOfElements userInput="0" selector="{{AdminNewWidgetSection.CountDeleteButtons}}" stepKey="seeZeroDeleteButtons"/>
+    </test>
+</tests>

lib/internal/Magento/Framework/View/Helper/SecureHtmlRenderer.php

@@ -8,7 +8,6 @@
 
 namespace Magento\Framework\View\Helper;
 
-use Magento\Framework\Api\SimpleDataObjectConverter;
 use Magento\Framework\Math\Random;
 use Magento\Framework\View\Helper\SecureHtmlRender\EventHandlerData;
 use Magento\Framework\View\Helper\SecureHtmlRender\HtmlRenderer;
@@ -105,23 +104,27 @@ public function renderEventListenerAsTag(
         }
 
         $random = $this->random->getRandomString(10);
-        $listenerFunction = 'eventListener' .$random;
-        $elementName = 'listenedElement' .$random;
+        $listenerFunction = 'eventListener' . $random;
+        $elementName = 'listenedElement' . $random;
         $script = <<<script
             function {$listenerFunction} () {
                 {$attributeJavascript};
             }
-            var {$elementName} = document.querySelector("{$elementSelector}");
-            if ({$elementName}) {
-                {$elementName}.{$eventName} = function (event) {
-                    var targetElement = {$elementName};
-                    if (event && event.target) {
-                        targetElement = event.target;
+            var {$elementName}Array = document.querySelectorAll("{$elementSelector}");
+            if({$elementName}Array.length !== 'undefined'){
+                {$elementName}Array.forEach(function(element) {
+                    if (element) {
+                        element.{$eventName} = function (event) {
+                            var targetElement = element;
+                            if (event && event.target) {
+                                targetElement = event.target;
+                            }
+                            {$listenerFunction}.apply(targetElement);
+                        };
                     }
-                    {$listenerFunction}.apply(targetElement);
-                }
+                });
             }
-script;
+        script;
 
         return $this->renderTag('script', ['type' => 'text/javascript'], $script, false);
     }
@@ -140,7 +143,7 @@ public function renderStyleAsTag(string $style, string $selector): string
             throw new \InvalidArgumentException('Invalid style data given');
         }
 
-        $elementVariable = 'elem' .$this->random->getRandomString(8);
+        $elementVariable = 'elem' . $this->random->getRandomString(8);
         /** @var string[] $styles */
         $stylesAssignments = '';
         foreach ($stylePairs as $stylePair) {
@@ -162,7 +165,7 @@ public function renderStyleAsTag(string $style, string $selector): string
             'script',
             ['type' => 'text/javascript'],
             "var $elementVariable = document.querySelector('$selector');\n"
-            ."if ($elementVariable) {\n{$stylesAssignments}}",
+            . "if ($elementVariable) {\n{$stylesAssignments}}",
             false
         );
     }