Topic: sidenav items requires two clicks to work on iphone

moodworkshop premium asked 1 week ago


Expected behavior

On PC and Android it requires on a click

Actual behavior

On Iphone it requires a first click to seem to get sidenav focus, and a second click to access the item. The first click can get side nav items highlighted though

Resources (screenshots, code snippets etc.)

https://mdbootstrap.com/docs is your documentation site, and the angular and vanilla js version of docs's hamburger menu also act this way on an iphone. Please let me know if there's any way to get around this.

    <mdb-sidenav-item>
      <a class="sidenav-link" tabindex="0" (click)="_location.go('/dashboard')">
         <i-feather name="home"></i-feather>
        <span slim="false"
              class="ms-3">Home</span>
      </a>
    </mdb-sidenav-item>

Rafał Seifert staff commented 1 week ago

Thank you for your post. Indeed, there is a problem. Unfortunately, I cannot provide a quick workaround for you at this moment. We will add this issue to our to-do list and investigate possible solutions.


david2658 free answered 6 hours ago


On iPhones, accessing a side navigation item requires two clicks: one to focus and one to select. To fix this, you can add a touchstart event alongside the click event in your component:

html Copy code Home In your TypeScript file:

typescript Copy code navigate(path: string): void { this._location.go(path); } This ensures the navigation works on the first touch or click, improving the experience on iPhones.


blodgett free answered 7 hours ago


On iOS devices, the first touch event on an element is often interpreted as a hover, which can cause the need for a second touch to trigger the click event. Instead of relying on a click event, you could directly link the tag to the desired page, which might reduce the complexity of the interaction. Use JavaScript to listen for touch events (touchstart or touchend) on the sidenav items and trigger the navigation programmatically. Utilize CSS pseudo-classes like :active or :focus to style the sidenav items in a way that makes it clear they have been activated with the first touch.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.1.0
  • Device: iphone
  • Browser: chrome
  • OS: ios
  • Provided sample code: No
  • Provided link: Yes