fix(input): disable shadow-dom for text inputs (#17043)

fixes #17020

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);
 

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);

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;
 

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 { debounceEvent, findItemLabel } from '../../utils/helpers';
-import { createColorClasses, hostContext } from '../../utils/theme';
+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) {

core/src/components/item/item.ios.scss

@@ -152,10 +152,7 @@
   --min-height: 68px;
 }
 
-:host(.item-label-stacked) ::slotted(ion-input),
+// TODO: refactor, ion-item and ion-textarea have the same CSS
-:host(.item-label-floating) ::slotted(ion-input),
-:host(.item-label-stacked) ::slotted(ion-textarea),
-:host(.item-label-floating) ::slotted(ion-textarea),
 :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
 // --------------------------------------------------

core/src/components/item/item.md.scss

@@ -235,11 +235,7 @@
   --min-height: 65px;
 }
 
-// TODO: refactor
+// TODO: refactor, ion-item and ion-textarea have the same CSS
-: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),
 :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;

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;
+}

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;
+}

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
 // --------------------------------------------------

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) {