fix(datepicker): has focus on click input

ovh · Oct 31, 2023 · b9b74ce · b9b74ce
1 parent 6c06d99
commit b9b74ce
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/components/datepicker/src/components/osds-datepicker/core/controller.ts b/packages/components/datepicker/src/components/osds-datepicker/core/controller.ts
@@ -11,7 +11,7 @@ class OdsDatepickerController {
     this.component = component;
   }
 
-  onFocus() {
+  onFocus(): void {
     if (!this.component.disabled) {
       this.component.hasFocus = true;
       this.component.emitFocus();
@@ -29,16 +29,19 @@ class OdsDatepickerController {
         this.component.datepickerInstanceAccessor?.setDate(newValue);
         this.component.emitDatepickerValueChange(newValue, oldValue ? oldValue : null);
       }
-      this.component.el.focus();
-      this.component.el.blur();
+      this.component.hasFocus = false;
     }
   }
 
-  onBlur() {
+  onBlur(): void {
     this.component.hasFocus = false;
     this.component.emitBlur();
   }
 
+  onClick(): void {
+    this.component.hasFocus = true;
+  }
+
   private getMidnightDate(date: Date): Date {
     return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
   }

diff --git a/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.tsx b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.tsx
@@ -171,7 +171,11 @@ export class OsdsDatepicker implements OdsDatepickerAttribute, OdsDatepickerEven
     this.controller.onFocus();
   }
 
-  componentDidLoad() {
+  onClick(): void {
+    this.controller.onClick();
+  }
+
+  componentDidLoad(): void {
     this.initializeDatepicker();
   }
 
@@ -302,6 +306,7 @@ export class OsdsDatepicker implements OdsDatepickerAttribute, OdsDatepickerEven
         onFocus: () => this.onFocus(),
       }}>
         <osds-input
+          onClick={ () => this.onClick() }
           clearable={clearable}
           color={color}
           disabled={disabled}