fix(item): add the multiple inputs class to fix select/datetime in item

references #15547 closes #15401

core/src/components/item/item.scss

@@ -181,13 +181,32 @@ button, a {
 :host(.item-label-stacked) ::slotted(ion-select),
 :host(.item-label-floating) ::slotted(ion-select) {
   --padding-start: 0;
+
   align-self: stretch;
 
   width: 100%;
 
   max-width: 100%;
 }
 
+
+// Item Datetime
+// -----------------------------------------
+
+:host(.item-label-stacked) ::slotted(ion-datetime),
+:host(.item-label-floating) ::slotted(ion-datetime) {
+  --padding-start: 0;
+
+  width: 100%;
+}
+
+
+// Item w/ Multiple Inputs
+// -----------------------------------------
+// Multiple inputs in an item should have the input cover
+// relative to them instead of the item
+
+:host(.item-multiple-inputs) ::slotted(ion-datetime),
 :host(.item-multiple-inputs) ::slotted(ion-select) {
   position: relative;
 }

core/src/components/item/item.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core';
 
 import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
@@ -16,6 +16,8 @@ export class Item implements ComponentInterface {
 
   @Element() el!: HTMLStencilElement;
 
+  @State() multipleInputs = false;
+
   @Prop({ context: 'window' }) win!: Window;
 
   /**
@@ -113,6 +115,10 @@ export class Item implements ComponentInterface {
         button.size = 'small';
       }
     });
+
+    // Check for multiple inputs to change the position to relative
+    const inputs = this.el.querySelectorAll('ion-select, ion-datetime');
+    this.multipleInputs = inputs.length > 1 ? true : false;
   }
 
   private isClickable(): boolean {
@@ -133,7 +139,8 @@ export class Item implements ComponentInterface {
         [`item-lines-${this.lines}`]: !!this.lines,
         'item-disabled': this.disabled,
         'in-list': hostContext('ion-list', this.el),
-        'item': true
+        'item': true,
+        'item-multiple-inputs': this.multipleInputs
       }
     };
   }