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

Calendar: keyboard support bug when there is a disable date next to the focused date #3032

Closed
nagisaando opened this issue Sep 26, 2022 · 1 comment
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@nagisaando
Copy link

Describe the bug

Hello,

Calendar keyboard support works great so far, but there is an issue when there is disable days/date.
For example, when the key arrow is clicked and there is a disable date next to the focused element, it will move to next month.
Instead, it should skip the disable date and move to the next focusable date from the row otherwise it's pretty difficult to select the specific date for those who use the keyboard.

This issue is happening because onDateCellKeydown function in Calendar component, is checking the next date is focusable instead of checking the first/second half of the focused date.

// Calendar.vue

              onDateCellKeydown(event, date, groupIndex) {
                .
                .
                .
                case 'ArrowLeft': {
                    cellContent.tabIndex = '-1';
                    let prevCell = cell.previousElementSibling;
                    if (prevCell) {
                        let focusCell = prevCell.children[0];
                        if (DomHandler.hasClass(focusCell, 'p-disabled')) { <=================
                            this.navigateToMonth(event, true, groupIndex);
                        } else {
                            focusCell.tabIndex = '0';
                            focusCell.focus();
                        }
                    } else {
                        this.navigateToMonth(event, true, groupIndex);
                    }
                    event.preventDefault();
                    break;
                }
                .
                .

Reproducer

https://codesandbox.io/s/suspicious-grass-isicm2?file=/src/App.vue

PrimeVue version

3.16.2

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

  1. Click Calendar input
  2. Click the arrow down to focus a date from the Calendar
  3. Click the arrow right where there is order as focused date | disable date | focusable date |

Expected behavior

When the key arrow is clicked and if there is a disable date next to the focused date, it should skip the disable date and move to the next focusable date from the row and if there is no focusable item, it should move to next/previous month.

@nagisaando nagisaando added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Sep 26, 2022
@nagisaando nagisaando changed the title Component Name: Issue Title Calendar: keyboard support when there is a disable date next to the focused date Sep 26, 2022
@nagisaando nagisaando changed the title Calendar: keyboard support when there is a disable date next to the focused date Calendar: keyboard support bug when there is a disable date next to the focused date Sep 26, 2022
@tugcekucukoglu tugcekucukoglu added this to the 3.17.1 milestone Oct 11, 2022
@tugcekucukoglu tugcekucukoglu self-assigned this Oct 11, 2022
@tugcekucukoglu
Copy link
Member

Fixed via #3071

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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