Vuepress: Dropdown link in nav not expanding when clicked on mobile

[chickahoona]

• [x] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

1. Go to https://doc.psono.com/
2. Reduce the browser width till you see the collapsed top menu
3. Try to click the "More" Link

The source code can be found here:
https://gitlab.com/psono/psono-doc

What is expected?

I would expect that the collapsed view expands and the links configured underneath show up.

What is actually happening?

When you click the "More" Button nothing is happening. The dropdown does not expand and no links underneath are shown.

Other relevant information

• Output of npx vuepress info in my VuePress project:

$ npx vuepress info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Xeon(R) CPU E3-1245 V2 @ 3.40GHz
  Binaries:
    Node: 10.16.2 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 75.0.3770.80
    Firefox: Not Found
  npmPackages:
    @vuepress/core:  1.4.1
    @vuepress/theme-default:  1.4.1
    vuepress: ^1.4.1 => 1.4.1
  npmGlobalPackages:
    vuepress: Not Found

• The result is the same also in my build pipeline which uses gitlab-ci with node:12-stretch docker image and more up to date versions of node and yarn

• I have tried it in multiple browsers. Edge (Chromium) Chrome, Firefox, Firefox on mobile, Samsung's "Internet"-browser, so I assume the error is browser independent

• MANY thanks for this amazing docu. It is by far the best that I could find so far! :)

[ludanxer]

Thanks for the report, will be fixed in the next release, see #2303

Temporarily, you can use Theme Inheritance to fix it

.
├── config.js
...
└── theme
    ├── components
    │   └── DropdownLink.vue
    └── index.js

1. Copy everything in DropdownLink.vue to .vuepress/theme/components/DropdownLink.vue

2. Create an index.js file at .vuepress/theme/index.js with content

module.exports = {
  extend: '@vuepress/theme-default'
}

[chickahoona]

Thanks for the extremely quick reply! As it is being tracked in that other issue I am closing this one here.

[yoriiis]

You can also just update the index.styl file and add following lines for a quick fix in order to wait the next release.

.sidebar .dropdown-wrapper .dropdown-title {
    pointer-events: auto;
}

The file is located docs/.vuepress/styles/index.styl.

[avimehenwal]

Thanks @yoriiis , this fix helped me.
I am using [email protected]

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.4 - /usr/bin/npm
  Browsers:
    Chrome: 81.0.4044.129
    Firefox: 75.0
  npmPackages:
    @vuepress/core:  1.4.1 
    @vuepress/theme-default:  1.4.1 
    vuepress: ^1.0.0-rc.1 => 1.0.0-rc.1 
  npmGlobalPackages:
    vuepress: Not Found