Closed theonelucas closed 7 months ago
A reproducible example:
<script setup lang="ts">
import { ODatepicker } from '@oruga-ui/oruga-next';
import { ref } from 'vue';
const date = ref(new Date());
const range = ref([new Date(), new Date()]);
</script>
<template>
<OField label="Date">
<ODatepicker v-model="date" :readonly="false" />
</OField>
<OField label="Date Range">
<ODatepicker v-model="range" :readonly="false" range />
</OField>
</template>
Trying to edit either date via the keyboard just clears it out once the control loses focus.
I suspect this logic is what's clearing the value.
@blm768 Thanks for the fix, seems good.
@theonelucas editable
got renamed to readonly
to get it inline with the other input components.
Maybe we should also change the default value of readonly to false instead of true? What do you think?
Maybe we should also change the default value of readonly to false instead of true? What do you think?
That would be closer to the standard behavior of the readonly
property, which defaults to false
like all HTML Boolean attributes. The readonly
property for ODatepicker
really doesn't behave like it does for other inputs, though. If I were just looking at the HTML specification rather than the Oruga documentation, I'd expect <ODatepicker readonly>
to not allow any kind of user input, not even via the pop-up picker.
Yeah you are right, that is how it should be. @blm768 Could you update your PR or make another one :)?
Overview of the problem
Oruga latest Vuejs version: latest OS/Browser: any
Description
In the vue 2 version of oruga, the
o-datepicker
component used to have a prop namededitable
, which as its name suggested, allowed for the inline editing of the date. Now, in the latest version of oruga for vue 3, that prop is gone, and the only prop that resembles that isreadonly
, which acts as the nativereadonly
attribute.Steps to reproduce
I created a sandbox reproducing the issue.
Expected behavior
When the date is inline edited, if the text is a valid date, it should be set as the date.
Actual behavior
The date is either not changed or emptied.