Profile edit page shows incorrect label for birth year

[haldaranup]

Observed behavior

When we try to edit birth year on our edit profile page the value and label gets mismatched due to which birth year value shows incorrect on our profile page

…

Expected behavior

The birth year we select from drop-down, exact value should show, but it shows value with 1 incremented to it

…

Steps to reproduce

1. On localhost, go to profile section
2. Click on edit
3. Select birth year from age dropdown
4. Check the value if it is correct

...

[thesujai]

@haldaranup can you provide steps on how to reproduce this?
I dont see the same behaviour.
checkout:
Screencast from 23-09-23 12:45:30 PM IST.webm

[haldaranup]

@haldaranup can you provide steps on how to reproduce this? I dont see the same behaviour. checkout: Screencast from 23-09-23 12:45:30 PM IST.webm

Sure @thesujai, Actually I found this on my local.

[MisRob]

Adding a clarification note - by value, the author means <BirthYearSelect> internal prop value. Even though this bug is somewhat invisible to a user, it could be actually pointing to an important issue.

Good catch, @haldaranup. Thanks for reporting.

[haldaranup]

@MisRob can I work on this issue? (might need some guidance🙂)

[marcellamaki]

Hi @haldaranup - yes, thank you for your interest. We will assign you to this issue. Let us know if you have questions.

[haldaranup]

@marcellamaki I have observed that the prototype formatDate we are using does something different (actually I don't know how it works internally)

Observations:

• When we use formatDate and pass the date directly like $formatDate('2023', {year: 'numeric'}) as we are doing for the label in profile edit page, it returns by decrementing 1 so we get '2022' here.

• If we pass the full year to it as we are doing in <birthYearDisplayText> component then it returns the correct value.

Based on the above observations I tried to pass the full year to formatDate and it worked, but I don't know if it is the right approach. Could you please help me with this?

[MisRob]

Hi @haldaranup,

thanks for looking into it.

If we pass the full year to it as we are doing in component then it returns the correct value.

I would recommend to do this for now.

When we use formatDate and pass the date directly like $formatDate('2023', {year: 'numeric'}) as we are doing for the label in profile edit page, it returns by decrementing 1 so we get '2022' here.

I think that $formatDate is supposed to work with String coercable to Date so this seems like a bug in formatDate that needs to be fixed as we use it at other places. @rtibbles what's the situation around vue-intl?

[rtibbles]

The string passed gets coerced to a Date object using new Date('2023'). If you do that in your browser console, you will observe this phenomenon:

When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format

So, when localized in any timezone that is less than UTC, this date will be shown as 2022, instead of 2023.

So, what we are seeing is not a bug in vue-intl $formatDate method, which is simply a wrapper around the Intl.DateTimeFormat API, but instead the fact that when you coerce a year string to a Date object, it produces a Date object with the value midnight on the 1st of January, 2023 (UTC time), which can easily be displayed as 2022 in another timezone.

The fix here is probably to render 2023-6 instead, which will make sure it is slap bang in the middle of the year and could never be otherwise.

[MisRob]

Oh dear. Thanks @rtibbles. The solution suggested makes sense to me. @haldaranup if you could mention briefly in a comment when setting year-month (e.g. 2023-6) that it's because of the timezone, that'd be great.