Only set 'display: none' if hidden element is inside a shadow root

vaadin · Sep 17, 2020 · a3eedc8 · a3eedc8
1 parent b8a3922
commit a3eedc8
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 17 deletions.
diff --git a/flow-client/src/main/java/com/vaadin/client/PolymerUtils.java b/flow-client/src/main/java/com/vaadin/client/PolymerUtils.java
@@ -646,4 +646,20 @@ public static native void setProperty(Element element, String path,
          element.set(path, value);
      }-*/;
 
+    /**
+     * Returns true iff the element has a shadow root ancestor.
+     * 
+     * @param element
+     *            the element to test
+     * @return whether the element is in a shadow root
+     */
+    public static native boolean isInShadowRoot(Element element)
+    /*-{
+        while(element.parentNode && (element = element.parentNode)){
+            if(element instanceof ShadowRoot){
+                return true;
+            }
+        }
+        return false;
+     }-*/;
 }
diff --git a/flow-client/src/main/java/com/vaadin/client/flow/binding/SimpleElementBindingStrategy.java b/flow-client/src/main/java/com/vaadin/client/flow/binding/SimpleElementBindingStrategy.java
@@ -634,7 +634,9 @@ private void setElementInvisible(Element element, NodeMap visibilityData) {
                 visibilityData.getNode().getTree().getRegistry()
                         .getApplicationConfiguration(),
                 element, HIDDEN_ATTRIBUTE, Boolean.TRUE);
-        element.getStyle().setDisplay("none");
+        if (PolymerUtils.isInShadowRoot(element)) {
+            element.getStyle().setDisplay("none");
+        }
     }
 
     private void restoreInitialHiddenAttribute(Element element,
@@ -667,7 +669,8 @@ private void storeInitialHiddenAttribute(Element element,
 
         MapProperty initialDisplay = visibilityData
                 .getProperty(NodeProperties.VISIBILITY_STYLE_DISPLAY_PROPERTY);
-        if (!initialDisplay.hasValue()) {
+        if (PolymerUtils.isInShadowRoot(element) && !initialDisplay.hasValue()
+                && element.getStyle() != null) {
             initialDisplay.setValue(element.getStyle().getDisplay());
         }
     }

diff --git a/...text/src/main/java/com/vaadin/flow/uitest/ui/littemplate/InnerTemplateVisibilityView.java b/...text/src/main/java/com/vaadin/flow/uitest/ui/littemplate/InnerTemplateVisibilityView.java
@@ -12,7 +12,8 @@
 @Route(value = "com.vaadin.flow.uitest.ui.littemplate.InnerTemplateVisibilityView", layout = ViewTestLayout.class)
 public class InnerTemplateVisibilityView extends AbstractDivView {
 
-    public static final String TOGGLE_VISIBILITY_BUTTON_ID = "toggleVisibility";
+    public static final String TOGGLE_INNER_VISIBILITY_BUTTON_ID = "toggleInnerVisibility";
+    public static final String TOGGLE_OUTER_VISIBILITY_BUTTON_ID = "toggleOuterVisibility";
     public static final String INNER_ID = "inner";
     public static final String OUTER_ID = "outer";
 
@@ -33,20 +34,21 @@ public Outer() {
         }
     }
 
-    private boolean isVisible = true;
-
     public InnerTemplateVisibilityView() {
         Outer outer = new Outer();
         outer.setId(OUTER_ID);
         outer.inner.setId(INNER_ID);
 
-        NativeButton toggleVisibilityButton = new NativeButton(
-                "Toggle visibility of inner", e -> {
-                    isVisible = !isVisible;
-                    outer.inner.setVisible(isVisible);
-                });
-        toggleVisibilityButton.setId(TOGGLE_VISIBILITY_BUTTON_ID);
+        NativeButton toggleOuterVisibilityButton = new NativeButton(
+                "Toggle visibility of outer",
+                e -> outer.setVisible(!outer.isVisible()));
+        toggleOuterVisibilityButton.setId(TOGGLE_OUTER_VISIBILITY_BUTTON_ID);
+
+        NativeButton toggleInnerVisibility = new NativeButton(
+                "Toggle visibility of inner",
+                e -> outer.inner.setVisible(!outer.inner.isVisible()));
+        toggleInnerVisibility.setId(TOGGLE_INNER_VISIBILITY_BUTTON_ID);
 
-        add(toggleVisibilityButton, outer);
+        add(toggleOuterVisibilityButton, toggleInnerVisibility, outer);
     }
 }
diff --git a/...ontext/src/test/java/com/vaadin/flow/uitest/ui/littemplate/InnerTemplateVisibilityIT.java b/...ontext/src/test/java/com/vaadin/flow/uitest/ui/littemplate/InnerTemplateVisibilityIT.java
@@ -11,12 +11,12 @@
 public class InnerTemplateVisibilityIT extends ChromeBrowserTest {
 
     @Test
-    public void innerTemplateIsHidden() {
+    public void innerTemplateIsHiddenWithDisplayNone() {
         open();
 
-        // when hidden
+        // when inner is hidden
         NativeButtonElement toggleButton = $(NativeButtonElement.class)
-                .id(InnerTemplateVisibilityView.TOGGLE_VISIBILITY_BUTTON_ID);
+                .id(InnerTemplateVisibilityView.TOGGLE_INNER_VISIBILITY_BUTTON_ID);
         toggleButton.click();
 
         // then: element is not visible, attribute 'hidden' and 'display: none'
@@ -36,9 +36,9 @@ public void innerTemplateIsHidden() {
     public void innerTemplateDisplayStyleRestored() {
         open();
 
-        // when hidden and unhidden
+        // when inner is hidden and unhidden
         NativeButtonElement toggleButton = $(NativeButtonElement.class)
-                .id(InnerTemplateVisibilityView.TOGGLE_VISIBILITY_BUTTON_ID);
+                .id(InnerTemplateVisibilityView.TOGGLE_INNER_VISIBILITY_BUTTON_ID);
         toggleButton.click();
         toggleButton.click();
 
@@ -55,4 +55,23 @@ public void innerTemplateDisplayStyleRestored() {
                 inner.getCssValue("display"));
     }
 
+    @Test
+    public void outerTemplateIsHiddenWithAttributeOnly() {
+        open();
+
+        // when hidden
+        NativeButtonElement toggleButton = $(NativeButtonElement.class)
+                .id(InnerTemplateVisibilityView.TOGGLE_OUTER_VISIBILITY_BUTTON_ID);
+        toggleButton.click();
+
+        // then: element is not visible, attribute 'hidden' and 'display: none'
+        // set
+        WebElement outer = findElement(
+                By.id(InnerTemplateVisibilityView.OUTER_ID));
+        Assert.assertFalse("expected outer to be hidden", outer.isDisplayed());
+        Assert.assertNotNull("expected attribute hidden on outer",
+                outer.getAttribute("hidden"));
+        Assert.assertEquals("expected no style attribute", "",
+                outer.getAttribute("style"));
+    }
 }