Describe the bug
On the listing pages that have filtering on them (such as proposals, meetings, etc.), the filtering DOM elements are duplicated in the source with the same IDs.
This causes e.g. Chrome to show the following error in the developer console:
[DOM] Found 2 elements with non-unique id #element_id: (More info: https://goo.gl/9p2vKq)
To Reproduce
Steps to reproduce the behavior:
- Go to https://meta.decidim.org/processes/roadmap/f/122/
- Open developer console (CTRL+SHIFT+J in Chrome)
- See the DOM errors printed out
Expected behavior
I would expect the HTML of the service to be valid and not cause DOM issues.
Screenshots
Stacktrace
If applicable, add the error stacktrace to help explain your problem.
Extra data (please complete the following information):
- Device: Laptop
- Device OS: Ubuntu 18.01
- Browser: Chrome
- Decidim Version: 0.15.1 (also tested the master branch)
- Decidim installation: all, e.g. MetaDecidim
Additional context
This issue exists because the filtering elements are duplicated for the mobile browsers in the filtering modal/reveal element as seen here:
|
<%= render partial: "filters_small_view" %> |
|
<div class="card card--secondary show-for-mediumlarge"> |
|
<%= render partial: "filters" %> |
Furthermore, the part of the template that is rendered for the small screens re-renders the _filters.html.erb partial as seen here:
|
<%= render partial: "filters" %> |
And finally, the filters template uses the default Rails/Foundation helpers to render the filtering inputs for which the IDs are auto-generated using the field's key:
https://github.com/decidim/decidim/blob/fc9b0cb887b2f2a5a8b0e170b6316eba9ef41172/decidim-proposals/app/views/decidim/proposals/proposals/_filters.html.erb
https://github.com/rails/rails/blob/66a7cfa91045e05f134efc9ac0e226e66161e2e6/actionview/lib/action_view/helpers/tags/base.rb#L99-L106
Describe the bug
On the listing pages that have filtering on them (such as proposals, meetings, etc.), the filtering DOM elements are duplicated in the source with the same IDs.
This causes e.g. Chrome to show the following error in the developer console:
[DOM] Found 2 elements with non-unique id #element_id: (More info: https://goo.gl/9p2vKq)To Reproduce
Steps to reproduce the behavior:
Expected behavior
I would expect the HTML of the service to be valid and not cause DOM issues.
Screenshots
Stacktrace
If applicable, add the error stacktrace to help explain your problem.
Extra data (please complete the following information):
Additional context
This issue exists because the filtering elements are duplicated for the mobile browsers in the filtering modal/reveal element as seen here:
decidim/decidim-proposals/app/views/decidim/proposals/proposals/index.html.erb
Lines 55 to 57 in 2c85927
Furthermore, the part of the template that is rendered for the small screens re-renders the
_filters.html.erbpartial as seen here:decidim/decidim-proposals/app/views/decidim/proposals/proposals/_filters_small_view.html.erb
Line 16 in f88bcb3
And finally, the filters template uses the default Rails/Foundation helpers to render the filtering inputs for which the IDs are auto-generated using the field's key:
https://github.com/decidim/decidim/blob/fc9b0cb887b2f2a5a8b0e170b6316eba9ef41172/decidim-proposals/app/views/decidim/proposals/proposals/_filters.html.erb
https://github.com/rails/rails/blob/66a7cfa91045e05f134efc9ac0e226e66161e2e6/actionview/lib/action_view/helpers/tags/base.rb#L99-L106