Dropdown menu not working on mobile devices

[MaurerKrisztian]

Description

When attempting to open the dropdown menu on the website using a mobile device, the menu does not open or responds slowly. This bug occurs consistently across all mobile devices and browsers.

Steps to Reproduce

Navigate to the page on the website that contains a dropdown menu Click the dropdown menu icon using a mobile device

Expected Behavior

The dropdown menu should open quickly and smoothly, allowing the user to select an option.

Actual Behavior

The dropdown menu does not open or responds slowly, making it difficult for the user to select an option.

Additional Information

This bug does not occur when using the dropdown menu on a desktop computer. The website is using the latest version of jQuery and Bootstrap. The issue seems to be related to the way that the dropdown menu is implemented using JavaScript.

[github-actions[bot]]

Related Issues

none

Summary

The main objective of the issue 'Dropdown menu not working on mobile devices' is to identify why the dropdown menu is not working as expected when a user attempts to access it on a mobile device, as well as to find a solution to the issue. The summary of the main points are: (1) the dropdown menu does not open or responds slowly when accessing it on a mobile device, (2) the website is using the latest version of jQuery and Bootstrap, and (3) the issue might be related to the way the dropdown menu is implemented using JavaScript.

Label Suggestion

The appropriate labels for this issue are "Bug" and "Help wanted". The issue is a bug as it is not working as intended, and help is needed to identify and fix the issue.

[MaurerKrisztian]

After investigating the issue, I believe the cause of the problem is related to the use of a JavaScript library for the dropdown menu. Some mobile devices may not be able to handle the complex JavaScript code, leading to slow performance or non-responsiveness. To fix this issue, we can try one of the following solutions:

Solution 1: Simplify the JavaScript code used to implement the dropdown menu to reduce its complexity and improve performance on mobile devices.

Solution 2: Use a CSS-only approach to implement the dropdown menu, which should work more reliably across all devices and browsers.

I recommend trying solution 1 first, as it will require less work and may be sufficient to fix the issue. However, if we still encounter problems with slow performance or non-responsiveness, we may need to consider implementing solution 2.

Let me know if you have any questions or concerns about these solutions.

[MaurerKrisztian]

I've encountered this issue as well, and can confirm that it happens consistently on both Android and iOS devices.

[MaurerKrisztian]

I've reviewed the JavaScript code used for the dropdown menu and noticed that it's quite complex and includes many event listeners. I agree with developer4 that this is likely causing the slow performance on mobile devices.

[MaurerKrisztian]

I noticed that when I tried to open the dropdown menu with a mobile device, the page appeared to freeze briefly before the menu opened.

[MaurerKrisztian]

To simplify the JavaScript code used for the dropdown menu, we can try removing any unnecessary event listeners or reducing the number of DOM manipulations required to open the menu.

[MaurerKrisztian]

I tried using a different mobile browser (Safari instead of Chrome) and still encountered the same issue with the dropdown menu not working.

[MaurerKrisztian]

Another possible solution we can consider is to use a lightweight JavaScript library, such as VanillaJS, to implement the dropdown menu. This may improve performance on mobile devices and reduce the likelihood of compatibility issues.

[MaurerKrisztian]

I agree with developer7 that using a lightweight JavaScript library could be a good solution for this issue. However, we'll need to carefully evaluate the pros and cons of this approach before making any changes to the codebase.

[MaurerKrisztian]

!summarize

[github-actions[bot]]

Comment summary

The discussion suggest that the issue is related to how the dropdown menu is implemented using JavaScript. Possible solutions include simplifying the JavaScript code used for the dropdown menu, using a CSS-only approach, or using a lightweight JavaScript library such as VanillaJS. It is recommended to try simplifying the JavaScript code first, as this would require less work. However, the latter options should be considered if the issue persists.