search

pgbross / vue-material-adapter

Vue wrapper arround Material Components for the Web
ISC License
105 stars 20 forks source link

The ripple is missing on list items in the app drawer #183

Open axxie opened 3 years ago

axxie commented 3 years ago

Description

There is no ripple effect on items in the list in the app drawer and the current list item in the app drawer is not highlighted. The keyboard navigation in the app drawer doesn’t work.

Versions

vue-material-adapter: 2.0.3 yarn: 2.4.2 node: v12.13.1 OS: Windows 10 21H1 (OS Build 1904.1055) Browser: chrome 91.0.4472.124, firefox 89.0.2

Steps to reproduce

  1. Create application with app drawer, add some list items for navigation with “to” prop set, as described in https://pgbross.github.io/vue-material-adapter/#/component/drawer.
  2. Try to click navigation items in the drawer.
  3. Try to use keyboard for navigation.

Expected result

  1. The ripple effect is be displayed on mouse click.
  2. The current list item is displayed with the primary color.
  3. If the keyboard is used, it is possible to highlight navigation list item using “up” and “down” and navigate to corresponding page by using “space” key

Example 1

The drawer of the main material design site:

https://user-images.githubusercontent.com/5149179/124641161-0f1e3d00-de97-11eb-9c31-4aa6fe02fa67.mp4

Example 2

The drawer example within the list component example of the material components for the web:

https://user-images.githubusercontent.com/5149179/124641212-1ba29580-de97-11eb-876f-98c38669576e.mp4

Actual result

  1. The ripple effect is missing.
  2. The current list item is not shown.
  3. It is not possible to select item and navigate using keyboard

Example

The app drawer of the vue-material-adapter demo site:

https://user-images.githubusercontent.com/5149179/124641233-22c9a380-de97-11eb-9491-77be1cb986c8.mp4

Analysis

It looks like the presence of the “to” prop on the list item prevents some of the list functionality from working.