Generator-jhipster: Mobile responsive menu-bar not working in jhipster 6.0.1

[kalumet]

Overview of the issue

The dropdown menu is not triggering the router event when watched on a mobile device.

Motivation for or Use Case

Mobile users are not able to navigate as intendet.

Reproduce the error

jhipster generator 6.0.1
generate a vanilla monolith application

Related issues

I haven't found anything so far that would explain the issue. I tried to open a console on the mobile chrome (Iphone), but do not get any information or error-message.

Suggest a Fix

sorry ... I'm not experienced enough to understand how to identify the issue.

JHipster Version(s)

6.0.1

JHipster configuration

INFO! Using JHipster version installed locally in current project's node_modules
INFO! Executing jhipster:info
INFO! Options: from-cli: true
Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

[email protected] D:\dev\jhtest
`-- [email protected]

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp",
      "nativeLanguage": "de"
    },
    "jhipsterVersion": "6.0.1",
    "applicationType": "monolith",
    "baseName": "jhtest",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "session",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSwaggerCodegen": true,
    "rememberMeKey": "YourJWTSecretKeyWasReplacedByThisMeaninglessTextByTheJHipsterInfoCommandForObviousSecurityReasons",
    "clientFramework": "angularX",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "useSass": true,
    "clientPackageManager": "npm",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [],
    "enableTranslation": true,
    "nativeLanguage": "de",
    "languages": ["de", "en", "fr"]
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

Environment and Tools

openjdk version "11.0.3" 2019-04-16
OpenJDK Runtime Environment AdoptOpenJDK (build 11.0.3+7)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 11.0.3+7, mixed mode)

git version 1.8.4.msysgit.0

node: v8.11.3

npm: 5.6.0

yarn: 1.10.1

Docker version 18.09.2, build 6247962

docker-compose version 1.23.2, build 1110ad01

INFO! Congratulations, JHipster execution is complete!

Browsers and Operating System

Win 10 (Google Chrome is up to date
Version 79.0.3945.117 (Official Build) (64-bit))

Iphone 7s with latest IOS and APP Versions of Safari and Chrome.

• [x] Checking this box is mandatory (this is just to show you read everything)

[ruddell]

I've seen this issue and was going to report it, but it seems to be fixed in master. I couldn't find the change that fixed it though.

Only reproducible on a mobile browser, maybe iOS specific.
Fixed in master: https://pagination-master.herokuapp.com/
Broken with v6.5.1: https://pagination-issue-v-6-5-1.herokuapp.com/

Here is one possible workaround if you can't upgrade. You would have to apply it to all dropdown elements.

[qmonmert]

@kalumet indeed it works with the latest version of JHipster 6.6.0 (I just checked) cc @ruddell

[kalumet]

Thanks for the verification and the workaround.

[ruddell]

As it's fixed in the latest release v6.6.0 and a workaround is provided for those who can't upgrade yet, I'm closing the issue.

If someone wants to find the exact fix, it's somewhere between v6.5.1 and v6.6.0 but there are 150+ PRs from that period so it's hard to tell from a quick look.

[kaidohallik]

FYI: I tried https://pagination-issue-v-6-5-1.herokuapp.com/ with Chrome and Opera in Android and working fine, so it can be iOS specific.

[kaidohallik]

When looking at Git history then some candidates for fixer are:

1. removing bold from navbar hover in Angular default theme (bold caused dropdown width changes on hover on menu items with longest texts which caused e2e failures in some configs): #10820

2. updating dependencies: #10942