Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed duplicate id issue with secondary nav menu #4259

Merged
merged 3 commits into from
Jul 11, 2024

Conversation

girishpanchal30
Copy link
Contributor

Summary

When the page load, I count the number of secondary menus and add it to the nav menu wrap ID.
e.g: secondary-menu_2
ref: https://github.com/Codeinwp/neve/blob/master/.storybook/dummy-data.js#L514

Test instructions

  1. Create Wordpress site with Neve.
  2. Add a header element to both desktop and mobile view (for example a secondary menu)
  3. Save
  4. The HTML source will contain duplicate id values (e.g. secondary-menu)

Check before Pull Request is ready:

Closes #4256

@pirate-bot pirate-bot added the pr-checklist-complete The Pull Request checklist is complete. (automatic label) label Jul 1, 2024
@girishpanchal30 girishpanchal30 linked an issue Jul 1, 2024 that may be closed by this pull request
@pirate-bot
Copy link
Collaborator

pirate-bot commented Jul 1, 2024

Plugin build for 5e821df is ready 🛎️!

Copy link
Contributor

@preda-bogdan preda-bogdan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the solution is not complete, there are other components that might have the same problem and we should see if we can just switch to relying on classes and have an unique id for each instance (desktop/mobile) based on. the parent.

@girishpanchal30
Copy link
Contributor Author

@preda-bogdan As per your comment I've created unique ID based components, please review my latest commit and let me know if need any changes.

Copy link
Contributor

@preda-bogdan preda-bogdan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will approve this change, it would help to have a test for this specific case.
My original comment still stands, I think this will solve this issue but there might still be other components that will behave the same.
Also, it is not required to remove checklist items from PR, you can add the pr-checklist-skip tag if you intend to not add any tests.

@rodica-andronache
Copy link
Contributor

@girishpanchal30 it's not working for me, let me know if I'm missing something.

This is how I added the secondary menu on desktop https://vertis.d.pr/i/xPdUSS , on mobile https://vertis.d.pr/i/tAcdor and the ID is duplicated https://vertis.d.pr/i/etW95L

@girishpanchal30
Copy link
Contributor Author

@rodica-andronache It seems we need to add the device name in the ID to create a unique ID based on components and devices.
Please check with the latest build zip.

@rodica-andronache
Copy link
Contributor

@girishpanchal30 thank you! It works well now 👍

@vytisbulkevicius vytisbulkevicius merged commit 519535f into development Jul 11, 2024
15 checks passed
@vytisbulkevicius vytisbulkevicius deleted the fix/4256 branch July 11, 2024 00:12
@abaicus abaicus restored the fix/4256 branch July 30, 2024 10:44
@abaicus abaicus deleted the fix/4256 branch July 30, 2024 11:03
@pirate-bot
Copy link
Collaborator

🎉 This PR is included in version 3.8.10 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@pirate-bot pirate-bot added the released Indicate that an issue has been resolved and released in a particular version of the product. label Jul 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr-checklist-complete The Pull Request checklist is complete. (automatic label) released Indicate that an issue has been resolved and released in a particular version of the product.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Usage of duplicate id values in nav menu
5 participants