AlaskaAirlines / auro-datepicker

Custom element that allows users to select a date, either with text input or by displaying a calendar.
https://auro.alaskaair.com/components/auro/datepicker
Apache License 2.0
3 stars 4 forks source link

setCustomValidityValueMissing value not showing when x icon button is clicked #176

Open cynthiaricomendoza-alaskaair opened 11 months ago

cynthiaricomendoza-alaskaair commented 11 months ago

Describe the bug

we've upgraded to the latest version on the auro-datepicker because we noticed the setCustomValidityRangeUnderflow property wasn't working as expected in the version we were using before. however, now we are seeing an issue with setCustomValidityValueMissing, but only when the X icon button is clicked on. when user selects a date then clears it by clicking the x icon button in the datepicker the help text is not shown.

here is an example of what our code looks like:

        <auro-datepicker
          id="birth-date"
          setCustomValidityValueMissing="Infant's birthdate is required."
          ${ref(this.liBirthdayRef)}
          @auroDatePicker-valueSet=${this.birthdaySelected}
          maxDate="12/13/2023"
          minDate="12/14/2021"
          setCustomValidityRangeUnderflow="Each child 2 years and older must have their own seat and ticket."
          required
        >
          <span slot="fromLabel"
            >Birth date</span
          >
          <span slot="mobileDateLabel"
            >Birth date</span
          >
        </auro-datepicker>

To Reproduce

Steps to reproduce the behavior:

  1. add a value for setCustomValidityValueMissing in the auro-datepicker
  2. click on the auro-datepicker and input a date
  3. click on the x icon button on the auro-datepicker
  4. observe the value you set for setCustomValidityValueMissing is not shown under the input box in the datepicker

Expected behavior

the setCustomValidityValueMissing value should be shown when the user clears the date value.

Screenshots

https://github.com/AlaskaAirlines/auro-datepicker/assets/116121736/8fbb475f-6754-4a3b-b3ba-3b0a6e4aae0c

Desktop (please complete the following information):

Additional context

This works as expected when a user goes in the input and deletes it in there.

blackfalcon commented 11 months ago

Hey @cynthiaricomendoza-alaskaair are you able to repro this on the Auro doc site? Also please validate that you are on the most current version. https://auro.alaskaair.com/components/auro/datepicker/api#required

Here is a screenshot of my repro of this issue. The behavior is as expected.

Screen Shot 2023-12-20 at 4 49 57 PM
cynthiaricomendoza-alaskaair commented 11 months ago

@blackfalcon no, i wasn't able to reproduce it on the auro doc site. in the screen recording i attached, i was using the latest version 2.0.10. this might be specific to the auro-input because i was doing some testing with the input alone and saw similar behavior: https://github.com/AlaskaAirlines/auro-input/issues/275

blackfalcon commented 11 months ago

@cynthiaricomendoza-alaskaair please try and schedule some time with either @jason-capsule42 or @jordanjones243 to review this issue. I am unable to repro your issue and we need to understand better the context of use.

Patrick-Daly-AA commented 3 months ago

validate in DatePicker Beta Branch