Skip to content

Fix duplicate html id errors#2951

Open
AbdiTolesa wants to merge 4 commits intomasterfrom
issue-5113
Open

Fix duplicate html id errors#2951
AbdiTolesa wants to merge 4 commits intomasterfrom
issue-5113

Conversation

@AbdiTolesa
Copy link
Copy Markdown
Contributor

@AbdiTolesa AbdiTolesa commented Feb 11, 2026

Fix https://github.com/Strategy11/formidable-pro/issues/5113
I couldn't see the duplicate frm-nav-tabs errors anymore but only frm_insert_fields_tab, which is fixed in this issue.

image

Summary by CodeRabbit

  • Bug Fixes

    • Added null safety check to prevent potential runtime errors during element access.
  • Chores

    • Updated internal component identifiers for consistency across multiple files.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Feb 11, 2026

Warning

Rate limit exceeded

@AbdiTolesa has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 11 minutes and 58 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 15db8ba and d3f315b.

📒 Files selected for processing (1)
  • js/src/components/class-tabs-navigator.js
📝 Walkthrough

Walkthrough

Updated DOM identifier and related nav checks: the Add Fields anchor id was changed/removed, and multiple navigation click handlers were updated to use frm_add_fields_tab (plus one DOM guard added) without altering navigation targets or public APIs. No other behavioral changes.

Changes

Cohort / File(s) Summary
UI attribute
classes/views/frm-forms/add_field_links.php
Anchor element for the Add Fields tab had its id changed/removed; href and navigation remain unchanged.
Nav handlers & DOM guard (JS)
js/formidable-settings-components.js, js/formidable-web-components.js, js/formidable_dashboard.js, js/src/components/class-tabs-navigator.js, js/addons-page.js, js/formidable_blocks.js, js/frm_testing_mode.js
Replaced checks for tab id frm_insert_fields_tab with frm_add_fields_tab in multiple nav click handlers (affecting when clearSettingsBox runs). Also added a null/undefined guard for Dt before querySelectorAll in js/addons-page.js. Several files show minor non-functional refactors/formatting.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A tab id hopped from old to new,
I nudged the code and tidied the view.
Clicks still travel the same quaint track,
A little rename — no logic slack.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Fix duplicate html id errors' directly aligns with the PR's objective to resolve duplicate HTML id errors, specifically addressing the duplicate frm_insert_fields_tab id issue documented in the PR description.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch issue-5113

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@deepsource-io
Copy link
Copy Markdown

deepsource-io bot commented Feb 11, 2026

DeepSource Code Review

We reviewed changes in d957b46...d3f315b on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

Important

Some issues found as part of this review are outside of the diff in this pull request and aren't shown in the inline review comments due to GitHub's API limitations. You can see those issues on the DeepSource dashboard.

PR Report Card

Overall Grade   Security  

Reliability  

Complexity  

Hygiene  

Code Review Summary

Analyzer Status Updated (UTC) Details
PHP Feb 23, 2026 7:13p.m. Review ↗
JavaScript Feb 23, 2026 7:13p.m. Review ↗

@truongwp
Copy link
Copy Markdown
Contributor

@AbdiTolesa I'm afraid that this will affect this line (and some similar lines):

if ( this.id === 'frm_insert_fields_tab' && ! this.closest( '#frm_adv_info' ) ) {

Can you double-check it?

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@classes/views/frm-forms/add_field_links.php`:
- Line 16: The PHP ID was renamed to frm_add_fields_tab but remaining references
to frm_insert_fields_tab in the JS need updating; search for the string
"frm_insert_fields_tab" in the admin.js and tests/cypress support commands (the
modules that handle tab switching and test commands) and replace those
occurrences with "frm_add_fields_tab" so event listeners, click selectors and
Cypress commands target the new ID (verify selectors used in functions that
toggle tabs or in the Cypress custom command are updated accordingly).

In `@js/src/components/class-tabs-navigator.js`:
- Line 49: The comment above the conditional is stale: it says "Handle special
case for frm_insert_fields_tab" but the code now checks for frm_add_fields_tab;
update the comment to reference the correct ID (frm_add_fields_tab) or make it
generic (e.g., "Handle special case for add/insert fields tab") so it matches
the condition in the class-tabs-navigator component where the check for
frm_add_fields_tab occurs.

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fab01d3 and 15db8ba.

📒 Files selected for processing (9)
  • classes/views/frm-forms/add_field_links.php
  • js/addons-page.js
  • js/formidable-settings-components.js
  • js/formidable-web-components.js
  • js/formidable_admin.js
  • js/formidable_blocks.js
  • js/formidable_dashboard.js
  • js/frm_testing_mode.js
  • js/src/components/class-tabs-navigator.js

<ul class="frm-flex-box">
<li class="frm-active">
<a href="#frm-insert-fields" id="frm_insert_fields_tab">
<a href="#frm-insert-fields" id="frm_add_fields_tab">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check for any remaining references to the old ID across all JS and PHP files
echo "=== Remaining references to frm_insert_fields_tab ==="
rg -n "frm_insert_fields_tab" --type=js --type=php -C 2

echo ""
echo "=== All references to frm_add_fields_tab (for completeness) ==="
rg -n "frm_add_fields_tab" --type=js --type=php -C 1

Repository: Strategy11/formidable-forms

Length of output: 50384


Update all remaining references to the old ID frm_insert_fields_tab to match the new ID frm_add_fields_tab.

The ID rename in the PHP file is incomplete. Stale references remain in:

  • js/src/admin/admin.js (lines 743, 10831)
  • tests/cypress/support/commands.js (line 70)

These will silently break tab-switching functionality and cause test failures.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@classes/views/frm-forms/add_field_links.php` at line 16, The PHP ID was
renamed to frm_add_fields_tab but remaining references to frm_insert_fields_tab
in the JS need updating; search for the string "frm_insert_fields_tab" in the
admin.js and tests/cypress support commands (the modules that handle tab
switching and test commands) and replace those occurrences with
"frm_add_fields_tab" so event listeners, click selectors and Cypress commands
target the new ID (verify selectors used in functions that toggle tabs or in the
Cypress custom command are updated accordingly).

@@ -48,7 +48,7 @@ export class frmTabsNavigator {

// Handle special case for frm_insert_fields_tab
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Stale comment still references the old ID.

The comment says // Handle special case for frm_insert_fields_tab but the condition on the next line now checks frm_add_fields_tab.

✏️ Proposed fix
-		// Handle special case for frm_insert_fields_tab
+		// Handle special case for frm_add_fields_tab
		const navLink = navItem.querySelector( 'a' );
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Handle special case for frm_insert_fields_tab
// Handle special case for frm_add_fields_tab
const navLink = navItem.querySelector( 'a' );
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@js/src/components/class-tabs-navigator.js` at line 49, The comment above the
conditional is stale: it says "Handle special case for frm_insert_fields_tab"
but the code now checks for frm_add_fields_tab; update the comment to reference
the correct ID (frm_add_fields_tab) or make it generic (e.g., "Handle special
case for add/insert fields tab") so it matches the condition in the
class-tabs-navigator component where the check for frm_add_fields_tab occurs.

@AbdiTolesa
Copy link
Copy Markdown
Contributor Author

@AbdiTolesa I'm afraid that this will affect this line (and some similar lines):

if ( this.id === 'frm_insert_fields_tab' && ! this.closest( '#frm_adv_info' ) ) {

Can you double-check it?

@truongwp I don't think that won't affect this line since the selector for this callback function doesn't match with the Add Fields tab. But testing this again, I found a potential bug and just fixed it with may last commit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants