diff --git a/core/misc/dialog/dialog.position.es6.js b/core/misc/dialog/dialog.position.es6.js index 4c3e915e0e35de662f17ef4b732e116b5011acab..1b88d6e245fa86239944b29b585026872d4e9de8 100644 --- a/core/misc/dialog/dialog.position.es6.js +++ b/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'); diff --git a/core/misc/dialog/dialog.position.js b/core/misc/dialog/dialog.position.js index 843bf3b249ef95b78c5b720bdf881a874ae69787..9953e9a71cf3d91ad4da35f84b1cb653daa6eca0 100644 --- a/core/misc/dialog/dialog.position.js +++ b/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'); diff --git a/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php b/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php index 6f2f6259682d1f05dce940f528864cdc9afb5815..a31bf664f7b7b71d6e4553f723f4491de726322c 100644 --- a/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php +++ b/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', + ], + ]; + } + }