fix(calcite-radio-button): document-level "!important" style override…

…s applied to hidden input no longer take effect (#1551) * fix(calcite-radio-button): document-level "!important" style overrides applied to hidden input no longer take effect * adding test
Esri · Feb 13, 2021 · 6fa7b1c · 6fa7b1c
1 parent 2ae5d09
commit 6fa7b1c
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 21 deletions.
diff --git a/src/components/calcite-radio-button/calcite-radio-button.e2e.ts b/src/components/calcite-radio-button/calcite-radio-button.e2e.ts
@@ -415,4 +415,29 @@ describe("calcite-radio-button", () => {
     expect(await one.getProperty("checked")).toBe(false);
     expect(await two.getProperty("checked")).toBe(true);
   });
+
+  it("disallows !important style overrides on the hidden input", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <style>
+        input {
+          margin: unset !important;
+          opacity: unset !important;
+          padding: unset !important;
+          position: unset !important;
+          transform: unset !important;
+          z-index: unset !important;
+        }
+      </style>
+      <calcite-radio-button></calcite-radio-button>
+    `);
+    const input = await page.find("input");
+    const style = await input.getComputedStyle();
+    expect(style["margin"]).toBe("0px");
+    expect(style["opacity"]).toBe("0");
+    expect(style["padding"]).toBe("0px");
+    expect(style["position"]).toBe("absolute");
+    expect(style["transform"]).toBe("none");
+    expect(style["z-index"]).toBe("-1");
+  });
 });
diff --git a/src/components/calcite-radio-button/calcite-radio-button.tsx b/src/components/calcite-radio-button/calcite-radio-button.tsx
@@ -43,8 +43,8 @@ export class CalciteRadioButton {
     if (newChecked) {
       this.uncheckOtherRadioButtonsInGroup();
     }
-    if (this.input) {
-      this.input.checked = newChecked;
+    if (this.inputEl) {
+      this.inputEl.checked = newChecked;
     }
     this.calciteRadioButtonCheckedChange.emit(newChecked);
   }
@@ -54,31 +54,31 @@ export class CalciteRadioButton {
 
   @Watch("disabled")
   disabledChanged(disabled: boolean): void {
-    this.input.disabled = disabled;
+    this.inputEl.disabled = disabled;
   }
 
   /** The focused state of the radio button. */
   @Prop({ mutable: true, reflect: true }) focused = false;
 
   @Watch("focused")
   focusedChanged(focused: boolean): void {
-    if (!this.input) return;
+    if (!this.inputEl) return;
     if (focused && !this.el.hasAttribute("hidden")) {
-      this.input.focus();
+      this.inputEl.focus();
     } else {
-      this.input.blur();
+      this.inputEl.blur();
     }
   }
 
   /** The id attribute of the radio button.  When omitted, a globally unique identifier is used. */
-  @Prop({ reflect: true }) guid: string;
+  @Prop({ reflect: true, mutable: true }) guid: string;
 
   /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
   @Prop({ reflect: true }) hidden = false;
 
   @Watch("hidden")
   hiddenChanged(newHidden: boolean): void {
-    this.input.hidden = newHidden;
+    this.inputEl.hidden = newHidden;
   }
 
   /** The hovered state of the radio button. */
@@ -92,8 +92,8 @@ export class CalciteRadioButton {
     if (this.name === newName) {
       return;
     }
-    if (this.input) {
-      this.input.name = newName;
+    if (this.inputEl) {
+      this.inputEl.name = newName;
     }
     this.checkLastRadioButton();
     const currentValue: HTMLInputElement = this.rootNode.querySelector(
@@ -109,7 +109,7 @@ export class CalciteRadioButton {
 
   @Watch("required")
   requiredChanged(required: boolean): void {
-    this.input.required = required;
+    this.inputEl.required = required;
   }
 
   /** The scale (size) of the radio button.  <code>scale</code> is passed as a property automatically from <code>calcite-radio-button-group</code>. */
@@ -129,7 +129,7 @@ export class CalciteRadioButton {
 
   private initialChecked: boolean;
 
-  private input: HTMLInputElement;
+  private inputEl: HTMLInputElement;
 
   private radio: HTMLCalciteRadioElement;
 
@@ -165,6 +165,10 @@ export class CalciteRadioButton {
     this.calciteRadioButtonCheckedChange.emit();
   }
 
+  private setInputEl = (el): void => {
+    this.inputEl = el;
+  };
+
   private uncheckAllRadioButtonsInGroup(): void {
     const otherRadioButtons = Array.from(
       this.rootNode.querySelectorAll("calcite-radio-button")
@@ -248,7 +252,16 @@ export class CalciteRadioButton {
 
   private formResetHandler = (): void => {
     this.checked = this.initialChecked;
-    this.initialChecked && this.input?.setAttribute("checked", "");
+    this.initialChecked && this.inputEl?.setAttribute("checked", "");
+  };
+
+  private hideInputEl = (): void => {
+    this.inputEl.style.setProperty("margin", "0", "important");
+    this.inputEl.style.setProperty("opacity", "0", "important");
+    this.inputEl.style.setProperty("padding", "0", "important");
+    this.inputEl.style.setProperty("position", "absolute", "important");
+    this.inputEl.style.setProperty("transform", "none", "important");
+    this.inputEl.style.setProperty("z-index", "-1", "important");
   };
 
   private onInputBlur = (): void => {
@@ -281,8 +294,9 @@ export class CalciteRadioButton {
   }
 
   componentDidLoad(): void {
+    this.hideInputEl();
     if (this.focused) {
-      this.input.focus();
+      this.inputEl.focus();
     }
   }
 
@@ -318,7 +332,6 @@ export class CalciteRadioButton {
   }
 
   render(): VNode {
-    const inputStyle = { opacity: "0", position: "fixed", zIndex: "-1" };
     return (
       <Host labeled={!!this.el.textContent}>
         <input
@@ -330,9 +343,8 @@ export class CalciteRadioButton {
           name={this.name}
           onBlur={this.onInputBlur}
           onFocus={this.onInputFocus}
-          ref={(el) => (this.input = el)}
+          ref={this.setInputEl}
           required={this.required}
-          style={inputStyle}
           type="radio"
           value={this.value}
         />

diff --git a/src/demos/calcite-radio-button.html b/src/demos/calcite-radio-button.html
@@ -50,6 +50,15 @@
       background-color: orange;
       box-shadow: none;
     }
+
+    input {
+      margin: unset !important;
+      opacity: unset !important;
+      padding: unset !important;
+      position: unset !important;
+      transform: unset !important;
+      z-index: unset !important;
+    }
   </style>
 </head>
 
@@ -101,7 +110,8 @@ <h3>Scale s</h3>
 
                   <hr>
 
-                  <calcite-radio-button name="s-multiple-text-nodes" scale="s">More<br> than<br> one<br> text<br> node</calcite-radio-button>
+                  <calcite-radio-button name="s-multiple-text-nodes" scale="s">More<br> than<br> one<br> text<br> node
+                  </calcite-radio-button>
 
                   <h3>Scale m (default)</h3>
                   <calcite-radio-button name="m" scale="m" value="stencil" checked>Stencil</calcite-radio-button>
@@ -137,7 +147,8 @@ <h3>Scale m (default)</h3>
 
                   <hr>
 
-                  <calcite-radio-button name="m-multiple-text-nodes" scale="m">More<br> than<br> one<br> text<br> node</calcite-radio-button>
+                  <calcite-radio-button name="m-multiple-text-nodes" scale="m">More<br> than<br> one<br> text<br> node
+                  </calcite-radio-button>
 
                   <h3>Scale l</h3>
                   <calcite-radio-button name="l" scale="l" value="stencil" checked>Stencil</calcite-radio-button>
@@ -176,7 +187,8 @@ <h3>Scale l</h3>
 
                   <hr>
 
-                  <calcite-radio-button name="l-multiple-text-nodes" scale="l">More<br> than<br> one<br> text<br> node</calcite-radio-button>
+                  <calcite-radio-button name="l-multiple-text-nodes" scale="l">More<br> than<br> one<br> text<br> node
+                  </calcite-radio-button>
 
                   <hr>
 
@@ -478,4 +490,4 @@ <h3>Only one checked value (last wins, all checked)</h3>
   </demo-spacer>
 </body>
 
-</html>
+</html>