Calendar: manuelInput does not work

[carstenmetzler]

Describe the bug

Since version 3.22.0 and also in 3.23.0 the manual input of dates is not possible. It only works for time fields.

Reproducer

https://primevue.org/calendar

PrimeVue version

3.23.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[bordermedia]

Same. Needed to go back to 3.21.0 for manual input to work.

[lalmat]

Same here too... It was an old 2021 bug.

[aliehsdev]

@tugcekucukoglu The problem was created in issue #3452. You need to return (add) check !this.preventFocus.

[cricketthomas]

any update on this?

[aliehsdev]

It is strange that such important functionality as entering the date in the calendar has not yet been restored. You need to check your demos and the official website that use the latest PrimeVue components and you will find that entering the date anywhere in the calendar view does not work. I can't update PrimeVue components in my projects as the ability to enter a date is an important part of user input.

[bordermedia]

It is strange that such important functionality as entering the date in the calendar has not yet been restored. You need to check your demos and the official website that use the latest PrimeVue components and you will find that entering the date anywhere in the calendar view does not work. I can't update PrimeVue components in my projects as the ability to enter a date is an important part of user input.

Yep, same. Still stuck on 3.21.0 until this gets fixed.

[eytienne87]

I am disappointed in this calendar input it is very complicated for no reason

[rwparris2]

we have monkey patched this component to make it work

this hasn't been super-vetted, it may have other unintended consequences

<Calendar
  ref="calendarComponentRef"
  ...
/>

/**
 * Prevent PrimeVue's Calendar component from stealing focus from its own
 * input, preventing users from manually entering dates
 *
 * see https://github.com/primefaces/primevue/issues/3624
 */
const fixCalendarFocusTrap = () => {
  const componentExists = !!calendarComponentRef.value;
  if (!componentExists) return;

  const alreadyMonkeyPatched =
    !!calendarComponentRef.value.originalUpdateFocusFunc;
  if (alreadyMonkeyPatched) return;

  calendarComponentRef.value.originalUpdateFocusFunc =
    calendarComponentRef.value.updateFocus;

  calendarComponentRef.value.updateFocus = () => {
    const inputEl = calendarComponentRef.value.input;
    const inputElHasFocus = inputEl && inputEl == document.activeElement;
    if (!inputElHasFocus) {
      calendarComponentRef.value.originalUpdateFocusFunc();
    }
  };
};

watch(calendarComponentRef, () => fixCalendarFocusTrap(), {
  immediate: true,
});

[MoMack20]

@mertsincan @tugcekucukoglu
This looks to be fixed in this pull request here
#3689

[csmaller]

still in PR with merge conflicts

[aliehsdev]

still in PR with merge conflicts

The causes of the problem have long been found, and the solution is very simple. MR with conflicts, because the code base has changed and the project developers ignore this issue, despite the fact that they themselves created this bug.

[mv-ics]

Please fix this. Using the monkeypatch for now, but that's not a good solution...

[knadich]

/**
 * Prevent PrimeVue's Calendar component from stealing focus from its own
 * input, preventing users from manually entering dates
 *
 * see https://github.com/primefaces/primevue/issues/3624
 */
const fixCalendarFocusTrap = () => {
  const componentExists = !!calendarComponentRef.value;
  if (!componentExists) return;

  const alreadyMonkeyPatched =
    !!calendarComponentRef.value.originalUpdateFocusFunc;
  if (alreadyMonkeyPatched) return;

  calendarComponentRef.value.originalUpdateFocusFunc =
    calendarComponentRef.value.updateFocus;

  calendarComponentRef.value.updateFocus = () => {
    const inputEl = calendarComponentRef.value.input;
    const inputElHasFocus = inputEl && inputEl == document.activeElement;
    if (!inputElHasFocus) {
      calendarComponentRef.value.originalUpdateFocusFunc();
    }
  };
};

watch(calendarComponentRef, () => fixCalendarFocusTrap(), {
  immediate: true,
});

Hello,
Can I see more about your solution please ?
Thanks

[carstenmetzler]

Are there any updates? It still not works in 3.30.2. I stick to version 3.21.0 because of this bug.

[argentines]

For me solution was, copy all code from primevue node_modules\primevue\calendar\Calendar.vue version 3.21.0, create new component with code from version 3.21.0 and import it im my component Calendar, import CalendarNew from '@shared/components/CalendarNew.vue'.

[dmhendricks]

Users kept complaining, so I did what @argentines recommended plus added these 3 fixes:

• 404a238
• d68ff23
• ede8fcd

I also had to add /* falls through */ to various case statements because JSLint was complaining about the lack of breaks in case statements. It worked. I'm able to use this custom Calendar component in conjunction with the latest version of PrimeVue (3.31.0 at the time of this post).

Here is my CalendarNew.vue component with the modified code: https://pastebin.com/TWyjvVuE

2023-10-09 UPDATE: Added ede8fcd to fix AM/PM issue

[dragomirweb]

+1 with 3.25.0

[omzy]

Issue still exists on latest version (3.32.2)

[RobbieLD]

Still broken in V3.34.1

[csmaller]

How the heck does this pass PR all the time as it's still broken. You guys need some QA over there

[cagataycivici]

Set to be fixed at 3.34.2. So many comments, we must fix it! Sorry for delays, the unstyled mode took majority of focus but we're back to normal maintenance schedule now.

[ilearnio]

It's still not fixed in 3.35.0

[dmhendricks]

I'm not sure what to do now. It appears that my custom version #3624 (comment) doesn't work with 3.35.0. I am experiencing issue #4451 now.

I tried adding the fix mentioned in the post:
https://github.com/primefaces/primevue/pull/4451/files

...but the AM/PM thing is still happening, which leads me to believe I'm missing some other changes along the way. Regardless, maintaining a compatible custom Calendar component has become undesireable.

I think my options are:

1. Stay at version 3.21.0 indefinitely, or
2. Stop using manualInput on the Calendar component, or
3. Use 24-hour format only (since the AM/PM bug only affects 12-hour format), which will allow me to continue using my crappy custom component

Options 1 & 3 aren't ideal for me, and users will complain about options 2 & 3. I suspect I'll have to go with option 2, but if anyone has additional ideas, please share. Thank you.

[D-Bastien]

For people who cannot upgrade their versions, here's another naive fix. Not sure why it works with seemingly no breaks, but it's good enough for my needs. Use at your own risk.

import Calendar from 'primevue/calendar'

import {defineComponent} from 'vue'

export default defineComponent({
    extends: Calendar as any,
    methods: {
        updateFocus: () => {
            /* Prevents primevue's default behaviour. */
        }
    }
})

Just put this in a .ts or .js file & use this instead of the base component.

[NguyenNghia412]

For people who cannot upgrade their versions, here's another naive fix. Not sure why it works with seemingly no breaks, but it's good enough for my needs. Use at your own risk.

import Calendar from 'primevue/calendar'

import {defineComponent} from 'vue'

export default defineComponent({
    extends: Calendar as any,
    methods: {
        updateFocus: () => {
            /* Prevents primevue's default behaviour. */
        }
    }
})

Just put this in a .ts or .js file & use this instead of the base component.

Thank you. I'm using v3.29.1 and it works <3

[devmini1203]

The 3.52.0 version has the same error