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

p-calendar: Pressing Enter key on prev or next month arrows calls onPrevButtonClick or onNextButtonClick twice respectively #9521

Closed
mir4ef opened this issue Nov 13, 2020 · 0 comments
Assignees
Labels
LTS-FIXED-10.0.6 Fixed in PrimeNG LTS 10.0.6 Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@mir4ef
Copy link

mir4ef commented Nov 13, 2020

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
When the enter key is used to navigate between months, it skips a month. For example, if the current month is July and I press the enter key when previous month arrow is focused, the calendar displays May.

Expected behavior
I would expect the calendar to go -1 or +1 month. For example, if the current month is July and I press the enter key when previous month arrow is focused, the calendar should display June. (I think it is worth mentioning that when pressing the space bar key, it functions as expected - it navigates 1 month at a time.)

Minimal reproduction of the problem with instructions
STEPS TO REPRODUCE

  1. Add a p-calendar element to an angular html file
  2. Set the inline attribute to true
  3. Use the keyboard (tab key) to navigate the UI
  4. When the previous (or next) month arrow is on focus, press the enter key one time
  5. The calendar view navigates -2 (or +2) months instead of -1 (or +1) depending whether you pressed back or forward. For example, if the current month is July and I press the enter key when previous month arrow is focused, the calendar displays May.

MINIMAL DEMO
https://stackblitz.com/edit/github-primeng-calendar?file=src/app/app.component.html

p-calendar

What is the motivation / use case for changing the behavior?
A user cannot use the Enter key to effectively navigate between months because it skips a month when Enter is used.
I think this behavior is caused by the two event listeners on the previous and next buttons - (click) and (keydown.enter). Buttons by default trigger click events when Enter or Space bar are pressed. I am probably missing something and would appreciate any info, but I am not sure what the reason for having an additional listener for Enter key here is.

Please tell us about your environment:
OS: Mac 10.15 and Windows 10
IDE: IntelliJ
Package manager: npm v6.14.8
Http server: nginx and webpack dev server (localhost)

  • Angular version: 10.1.5

  • PrimeNG version: 10.0.3

  • Browser:
    We tested these desktop browsers: [ Chrome 86 | Firefox 82 | IE 11 | Safari 13 ]

  • Language: [all]

  • Node (for AoT issues): node --version = 14.15.0

@yigitfindikli yigitfindikli added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Nov 23, 2020
@yigitfindikli yigitfindikli self-assigned this Nov 23, 2020
@yigitfindikli yigitfindikli added this to the 11.0.0-rc.2 milestone Nov 23, 2020
@yigitfindikli yigitfindikli added LTS-FIXED-10.0.6 Fixed in PrimeNG LTS 10.0.6 and removed LTS-PORTABLE labels Dec 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
LTS-FIXED-10.0.6 Fixed in PrimeNG LTS 10.0.6 Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants