Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: always validate programmatic date updates for picker components #927

Merged
merged 1 commit into from
Jun 5, 2024

Conversation

blm768
Copy link
Contributor

@blm768 blm768 commented May 17, 2024

HTML constraint validation can apply even if we're not using the native date picker, so I don't see a strong reason to skip checkHtml5Validity().

Proposed Changes

Previously, date and time pickers would only try to clear their constraint validation messages on direct user updates or blur events when in desktop mode, not on programmatic updates. In the video below, note that I have to blur the field before the validation message fixes itself:

before.webm

This is inconsistent with the behavior of other inputs, which will clear their validation messages even if not updated due to direct user input.

after.webm

Here's the code I used to demonstrate the issue:

<script setup lang="ts">
import { OButton, ODatepicker } from '@oruga-ui/oruga-next';
import { ref } from 'vue';

const date = ref<Date | undefined>(undefined);

</script>

<template>
  <main>
    <OField label="Date">
      <ODatepicker v-model="date" required />
    </OField>
    <OField>
      <OButton type="button" @click="date = new Date()">Set Date</OButton>
    </OField>
  </main>
</template>

Copy link

netlify bot commented May 17, 2024

Deploy Preview for oruga-documentation-preview ready!

Name Link
🔨 Latest commit 48308f6
🔍 Latest deploy log https://app.netlify.com/sites/oruga-documentation-preview/deploys/6646c3139235660008509122
😎 Deploy Preview https://deploy-preview-927--oruga-documentation-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

codecov bot commented May 17, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.86%. Comparing base (484cfe8) to head (48308f6).
Report is 68 commits behind head on develop.

Additional details and impacted files
@@             Coverage Diff              @@
##           develop     #927       +/-   ##
============================================
- Coverage    56.71%   17.86%   -38.86%     
============================================
  Files           30      292      +262     
  Lines         1511     7315     +5804     
  Branches       544     2120     +1576     
============================================
+ Hits           857     1307      +450     
- Misses         654     5058     +4404     
- Partials         0      950      +950     
Flag Coverage Δ
oruga-next 17.86% <100.00%> (-38.86%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

HTML constraint validation can apply even if we're not using the native
date picker.
@mlmoravek mlmoravek added the enhancement Improvements to existing features and functionality label Jun 3, 2024
@mlmoravek mlmoravek changed the title Always validate programmatic date updates fix: always validate programmatic date updates for picker components Jun 3, 2024
@mlmoravek mlmoravek merged commit 20ceedd into oruga-ui:develop Jun 5, 2024
8 of 9 checks passed
@blm768 blm768 deleted the validate-desktop-dates branch June 10, 2024 19:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Improvements to existing features and functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants