oruga-ui / oruga

🐛 Oruga is a lightweight library of UI components without any CSS framework dependency
https://oruga-ui.com
MIT License
1.13k stars 172 forks source link

Datepicker component no longer editable #881

Closed theonelucas closed 7 months ago

theonelucas commented 8 months ago

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 named editable, 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 is readonly, which acts as the native readonly 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.

blm768 commented 8 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.

mlmoravek commented 7 months ago

@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?

blm768 commented 7 months ago

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.

mlmoravek commented 7 months ago

Yeah you are right, that is how it should be. @blm768 Could you update your PR or make another one :)?