Skip to content

Calendar Keyboard Navigation Not Working when selected date (v-model) is out of min/max range #5057

@sundus-y

Description

@sundus-y

Describe the bug

On the Calendar, keyboard navigation becomes impossible if the current value is outside the min/max value.

Steps to reproduce the bug

Scenario: When min value is set

  1. Given I have a Calendar component with min value.
  2. And the current value is set to a value less than the min value.
  3. When I try to change the date using the keyboard navigations arrow.
  4. Then the date picker doesn't change and it doesn't do anything.

Scenario: When max value is set

  1. Given I have a Calendar component with max value.
  2. And the current value is set to a value greater than the max value.
  3. When I try to change the date using the keyboard navigations arrow.
  4. Then the date picker doesn't change and it doesn't do anything.

Expected behavior

Scenario: When min value is set

  1. Given I have a Calendar component with min value.
  2. And the current value is set to a value less than the min value.
  3. When I press the up or left arrow key.
  4. The date picker shouldn't change.
  5. When I press the down or right arrow key.
  6. The date picker should go to the min value.

Scenario: When max value is set

  1. Given I have a Calendar component with max value.
  2. And the current value is set to a value greater than the max value.
  3. When I press the down or right arrow key.
  4. The date picker shouldn't change.
  5. When I press the up or left arrow key.
  6. The date picker should go to the min value.

Versions

Libraries:

  • BootstrapVue: 2.9.0
  • Bootstrap: 4.3.x
  • Vue: 2.6.x

Environment:

  • Device: Mac
  • OS: macOS High Sierra
  • Browser: Chrome
  • Version: 80.0.3987.149

Demo link

CodePen Demo Link

Additional context

NA

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions