Issue #2822778 by wengerk, bighappyface, joelpittet, Lendude, lauriii,...

Issue #2822778 by wengerk, bighappyface, joelpittet, Lendude, lauriii, vivekguptakota, Meenakshi.g, shashikant_chauhan, GoZ, ifrik, Manuel Garcia, Neograph734: Modal popups in views is not showing properly when toolbar tray is upon modal

core/misc/dialog/dialog.position.es6.js

@@ -129,6 +129,9 @@
           autoResize,
         );
       }
+      // Force the dialog & dialog-overlay to render on top.
+      $element.dialog('widget').css('zIndex', 601);
+      $('.ui-widget-overlay').css('zIndex', 600);
     },
     'dialog:beforeclose': function(event, dialog, $element) {
       $(window).off('.dialogResize');

core/misc/dialog/dialog.position.js

@@ -60,6 +60,9 @@
         $(window).on('resize.dialogResize scroll.dialogResize', eventData, autoResize).trigger('resize.dialogResize');
         $(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize);
       }
+
+      $element.dialog('widget').css('zIndex', 601);
+      $('.ui-widget-overlay').css('zIndex', 600);
     },
     'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
       $(window).off('.dialogResize');

core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php

@@ -14,7 +14,13 @@ class FilterOptionsTest extends WebDriverTestBase {
   /**
    * {@inheritdoc}
    */
-  public static $modules = ['node', 'views', 'views_ui', 'views_ui_test_field'];
+  public static $modules = [
+    'node',
+    'views',
+    'views_ui',
+    'views_ui_test_field',
+    'toolbar',
+  ];
 
   /**
    * {@inheritdoc}
@@ -22,8 +28,12 @@ class FilterOptionsTest extends WebDriverTestBase {
   public function setUp() {
     parent::setUp();
 
+    // Install additional themes Seven & Bartik.
+    $this->container->get('theme_installer')->install(['seven', 'bartik']);
+
     $admin_user = $this->drupalCreateUser([
       'administer views',
+      'access toolbar',
     ]);
     $this->drupalLogin($admin_user);
   }
@@ -73,4 +83,59 @@ public function testFilterOptionsAddFields() {
     $this->assertFalse($page->findField('name[views.views_test_field_1]')->isVisible());
   }
 
+  /**
+   * Test the integration of the dialog with the toolbar module.
+   *
+   * @dataProvider themeDataProvider
+   */
+  public function testDialogOverlayWithHorizontalToolbar($theme) {
+    // Switch to the provided theme.
+    $this->container->get('config.factory')->getEditable('system.theme')
+      ->set('default', $theme)->save();
+    $this->container->get('router.builder')->rebuildIfNeeded();
+
+    $session = $this->getSession();
+
+    // Set size for horizontal toolbar.
+    $this->getSession()->resizeWindow(1200, 600);
+    $this->drupalGet('admin/structure/views/view/content');
+
+    $web_assert = $this->assertSession();
+    $page = $session->getPage();
+
+    $this->assertNotEmpty($web_assert->waitForElement('css', 'body.toolbar-horizontal'));
+    $this->assertNotEmpty($web_assert->waitForElementVisible('css', '.toolbar-tray'));
+
+    // Toggle the Toolbar in Horizontal mode to asserts the checkboxes are not
+    // covered by the toolbar.
+    $page->pressButton('Vertical orientation');
+
+    // Open the dialog.
+    $page->clickLink('views-add-field');
+
+    // Wait for the popup to open and the search field to be available.
+    $options_search = $web_assert->waitForField('override[controls][options_search]');
+
+    $options_search->setValue('FIELD_1_TITLE');
+    // Assert the element is clickable and on top of toolbar.
+    $web_assert->waitForElement('css', 'input[name="name[views.views_test_field_1]"]')->click();
+  }
+
+  /**
+   * Dataprovider that returns theme name as the sole argument.
+   */
+  public function themeDataProvider() {
+    return [
+      [
+        'classy',
+      ],
+      [
+        'seven',
+      ],
+      [
+        'bartik',
+      ],
+    ];
+  }
+
 }