From 63e0501ae666a48f4737d2bc89d16a4505d24bca Mon Sep 17 00:00:00 2001
From: Manu MA <manu.valladolid@gmail.com>
Date: Fri, 11 Jan 2019 16:07:38 +0100
Subject: [PATCH] fix(input): disable shadow-dom for text inputs (#17043)

fixes #17020
---
 core/src/components/input/input.ios.scss       |  7 +++++++
 core/src/components/input/input.md.scss        |  6 ++++++
 core/src/components/input/input.scss           |  5 +++++
 core/src/components/input/input.tsx            |  9 +++------
 core/src/components/item/item.ios.scss         | 11 +----------
 core/src/components/item/item.md.scss          | 12 +-----------
 core/src/components/textarea/textarea.ios.scss |  7 +++++++
 core/src/components/textarea/textarea.md.scss  |  7 +++++++
 core/src/components/textarea/textarea.scss     |  6 +++++-
 core/src/components/textarea/textarea.tsx      |  6 ++----
 10 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index d556527eb8..013f1e385b 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -10,6 +10,13 @@
   font-size: $input-ios-font-size;
 }
 
+:host-context(.item-label-stacked),
+:host-context(.item-label-floating) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0px;
+}
+
 .input-clear-icon {
   @include svg-background-image($input-ios-input-clear-icon-svg);
 
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index 5ff32b4c99..51bc9ce6cb 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -14,6 +14,12 @@
   font-size: $input-md-font-size;
 }
 
+:host-context(.item-label-stacked),
+:host-context(.item-label-floating) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0;
+}
 
 .input-clear-icon {
   @include svg-background-image($input-md-input-clear-icon-svg);
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 41fbd63a02..86234f9441 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -46,6 +46,10 @@
   z-index: $z-index-item-input;
 }
 
+:host-context(ion-item:not(.item-label)) {
+  --padding-start: 0;
+}
+
 :host(.ion-color) {
   color: current-color(base);
 }
@@ -63,6 +67,7 @@
   flex: 1;
 
   width: 100%;
+  height: 100%;
 
   border: 0;
 
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 867754ea1a..76fdf0054a 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -1,8 +1,8 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 import { Color, InputChangeEventDetail, Mode, StyleEventDetail, TextFieldTypes } from '../../interface';
-import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers';
-import { createColorClasses, hostContext } from '../../utils/theme';
+import { debounceEvent, findItemLabel } from '../../utils/helpers';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-input',
@@ -10,7 +10,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
     ios: 'input.ios.scss',
     md: 'input.md.scss'
   },
-  shadow: true
+  scoped: true
 })
 export class Input implements ComponentInterface {
 
@@ -319,7 +319,6 @@ export class Input implements ComponentInterface {
       'aria-disabled': this.disabled ? 'true' : null,
       class: {
         ...createColorClasses(this.color),
-        'in-item': hostContext('ion-item', this.el),
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus
       }
@@ -328,8 +327,6 @@ export class Input implements ComponentInterface {
 
   render() {
     const value = this.getValue();
-    renderHiddenInput(false, this.el, this.name, value, this.disabled);
-
     const labelId = this.inputId + '-lbl';
     const label = findItemLabel(this.el);
     if (label) {
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index 5895f5c623..5a5047f4c9 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -152,10 +152,7 @@
   --min-height: 68px;
 }
 
-:host(.item-label-stacked) ::slotted(ion-input),
-:host(.item-label-floating) ::slotted(ion-input),
-:host(.item-label-stacked) ::slotted(ion-textarea),
-:host(.item-label-floating) ::slotted(ion-textarea),
+// TODO: refactor, ion-item and ion-textarea have the same CSS
 :host(.item-label-stacked) ::slotted(ion-select),
 :host(.item-label-floating) ::slotted(ion-select) {
   --padding-top: 8px;
@@ -164,12 +161,6 @@
 }
 
 
-// TODO
-// .item-ios.item-label-stacked .label-ios + .input + .cloned-input,
-// .item-ios.item-label-floating .label-ios + .input + .cloned-input {
-//   @include margin-horizontal(0, null);
-// }
-
 // FROM TEXTAREA
 // iOS Stacked & Floating Textarea
 // --------------------------------------------------
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 3de4bcacf1..1b4acb17d7 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -235,11 +235,7 @@
   --min-height: 65px;
 }
 
-// TODO: refactor
-:host(.item-label-stacked) ::slotted(ion-input),
-:host(.item-label-floating) ::slotted(ion-input),
-:host(.item-label-stacked) ::slotted(ion-textarea),
-:host(.item-label-floating) ::slotted(ion-textarea),
+// TODO: refactor, ion-item and ion-textarea have the same CSS
 :host(.item-label-stacked) ::slotted(ion-select),
 :host(.item-label-floating) ::slotted(ion-select) {
   --padding-top: 8px;
@@ -247,12 +243,6 @@
   --padding-start: 0;
 }
 
-
-:host(:not(.item-label)) ::slotted(ion-input),
-:host(:not(.item-label)) ::slotted(ion-textarea) {
-  --padding-start: 0;
-}
-
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
   color: $label-md-text-color-focused;
diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss
index 561421957b..409d32bd8a 100644
--- a/core/src/components/textarea/textarea.ios.scss
+++ b/core/src/components/textarea/textarea.ios.scss
@@ -12,3 +12,10 @@
 
   font-size: $textarea-ios-font-size;
 }
+
+:host-context(.item-label-stacked),
+:host-context(.item-label-floating) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0px;
+}
diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
index 7365570fbc..f23bdf6831 100644
--- a/core/src/components/textarea/textarea.md.scss
+++ b/core/src/components/textarea/textarea.md.scss
@@ -12,3 +12,10 @@
 
   font-size: $textarea-md-font-size;
 }
+
+:host-context(.item-label-stacked),
+:host-context(.item-label-floating) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0;
+}
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index ac4d9f02a4..96275e5b17 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -56,10 +56,14 @@
 // Textarea Within An Item
 // --------------------------------------------------
 
-:host(.in-item) {
+:host-context(ion-item) {
   position: static;
 }
 
+:host-context(ion-item:not(.item-label)) {
+  --padding-start: 0;
+}
+
 
 // Native Textarea
 // --------------------------------------------------
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 905b565b16..e7eec1fb87 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 import { Color, Mode, StyleEventDetail, TextareaChangeEventDetail } from '../../interface';
-import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers';
+import { debounceEvent, findItemLabel } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
 
 @Component({
@@ -10,7 +10,7 @@ import { createColorClasses } from '../../utils/theme';
     ios: 'textarea.ios.scss',
     md: 'textarea.md.scss'
   },
-  shadow: true
+  scoped: true
 })
 export class Textarea implements ComponentInterface {
 
@@ -263,8 +263,6 @@ export class Textarea implements ComponentInterface {
 
   render() {
     const value = this.getValue();
-    renderHiddenInput(false, this.el, this.name, value, this.disabled);
-
     const labelId = this.inputId + '-lbl';
     const label = findItemLabel(this.el);
     if (label) {