From 0daf99d2a7862112b3ea9a1a4179271a210d2703 Mon Sep 17 00:00:00 2001
From: mlmo <marcel.moravek@yahoo.de>
Date: Thu, 5 Oct 2023 17:23:10 +0200
Subject: [PATCH] fix: datepicker placeholder

---
 .../src/components/datepicker/PickerWrapper.vue    | 14 ++++++++++++--
 packages/oruga-next/src/components/input/Input.vue | 11 +++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/oruga-next/src/components/datepicker/PickerWrapper.vue b/packages/oruga-next/src/components/datepicker/PickerWrapper.vue
index eead59c53..2bdc97495 100644
--- a/packages/oruga-next/src/components/datepicker/PickerWrapper.vue
+++ b/packages/oruga-next/src/components/datepicker/PickerWrapper.vue
@@ -85,9 +85,19 @@ const elementRef = computed(() =>
 );
 
 // use form input functionality for native input
-const { checkHtml5Validity, onBlur, onFocus, onInvalid, isValid } =
+const { checkHtml5Validity, onBlur, onFocus, onInvalid, isValid, isFocused } =
     useInputHandler(elementRef, emits, picker.value);
 
+/**
+ * Show input as text for placeholder,
+ * when placeholder and native value is given and input is not focused.
+ */
+const computedNativeType = computed(() =>
+    !picker.value.placeholder || props.nativeValue || isFocused.value
+        ? props.nativeType
+        : "text",
+);
+
 /**
  * When v-model is changed:
  *  1. Update internal value.
@@ -230,7 +240,7 @@ defineExpose({
             v-else
             ref="nativeInputRef"
             v-bind="inputBind"
-            :type="nativeType"
+            :type="computedNativeType"
             autocomplete="off"
             :model-value="nativeValue"
             :min="nativeMin"
diff --git a/packages/oruga-next/src/components/input/Input.vue b/packages/oruga-next/src/components/input/Input.vue
index e954ce987..fc6a12ac5 100644
--- a/packages/oruga-next/src/components/input/Input.vue
+++ b/packages/oruga-next/src/components/input/Input.vue
@@ -42,10 +42,7 @@ const props = defineProps({
      * Input type, like native
      * @values Any native input type, and textarea
      */
-    type: {
-        type: String,
-        default: "text",
-    },
+    type: { type: String, default: "text" },
     /**
      * Size of the control, optional
      * @values small, medium, large
@@ -300,6 +297,12 @@ function rightIconClick(event: Event): void {
 const isPasswordVisible = ref(false);
 const inputType = ref(props.type);
 
+// update inputType on type prop change
+watch(
+    () => props.type,
+    (type) => (inputType.value = type),
+);
+
 /** Current password-reveal icon name. */
 const passwordVisibleIcon = computed(() =>
     !isPasswordVisible.value ? "eye" : "eye-off",