fix(datetime): add ionBlur/ionFocus events to whole component (#23980)

core/src/components/datetime/datetime.tsx

@@ -10,7 +10,7 @@ import {
 import { getIonMode } from '../../global/ionic-global';
 import { Color, DatetimeChangeEventDetail, DatetimeParts, Mode, StyleEventDetail } from '../../interface';
 import { startFocusVisible } from '../../utils/focus-visible';
-import { raf, renderHiddenInput } from '../../utils/helpers';
+import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
 
 import {
@@ -880,6 +880,19 @@ export class Datetime implements ComponentInterface {
     }
     hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 });
     hiddenIO.observe(this.el);
+
+    /**
+     * Datetime uses Ionic components that emit
+     * ionFocus and ionBlur. These events are
+     * composed meaning they will cross
+     * the shadow dom boundary. We need to
+     * stop propagation on these events otherwise
+     * developers will see 2 ionFocus or 2 ionBlur
+     * events at a time.
+     */
+    const root = getElementRoot(this.el);
+    root.addEventListener('ionFocus', (ev: Event) => ev.stopPropagation());
+    root.addEventListener('ionBlur', (ev: Event) => ev.stopPropagation());
   }
 
   /**
@@ -1190,6 +1203,14 @@ export class Datetime implements ComponentInterface {
     });
   }
 
+  private onFocus = () => {
+    this.ionFocus.emit();
+  }
+
+  private onBlur = () => {
+    this.ionBlur.emit();
+  }
+
   private nextMonth = () => {
     const { calendarBodyRef } = this;
     if (!calendarBodyRef) { return; }
@@ -1596,6 +1617,8 @@ export class Datetime implements ComponentInterface {
     return (
       <Host
         aria-disabled={disabled ? 'true' : null}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
         class={{
           ...createColorClasses(color, {
             [mode]: true,

core/src/components/datetime/test/basic/index.html

@@ -327,7 +327,7 @@
           datetimes.forEach(datetime => {
             datetime.locale = (!!value) ? value : 'default';
           });
-        })
+        });
 
         const darkModeCheckbox = document.querySelector('ion-checkbox');
         darkModeCheckbox.addEventListener('ionChange', (ev) => {
@@ -342,18 +342,28 @@
           buttons.forEach(button => {
             button.color = ev.target.value;
           })
-        })
+        });
 
         titleToggle.addEventListener('ionChange', (ev) => {
           datetimes.forEach(datetime => {
             datetime.showDefaultTitle = ev.detail.checked;
           });
-        })
+        });
         buttonsToggle.addEventListener('ionChange', (ev) => {
           datetimes.forEach(datetime => {
             datetime.showDefaultButtons = ev.detail.checked;
           });
-        })
+        });
+
+        datetimes.forEach(datetime => {
+          datetime.addEventListener('ionFocus', () => {
+            console.log('Listen ionFocus: fired');
+          });
+
+          datetime.addEventListener('ionBlur', () => {
+            console.log('Listen ionBlur: fired');
+          });
+        });
 
         const defaultPopover = document.querySelector('ion-popover#default-popover');
         const customPopover = document.querySelector('ion-popover#custom-popover');