Fix bug with detecting section id when adding a field to a section

[Crabcyborg]

No description provided.

[coderabbitai]

Walkthrough

Adjusts drag-and-drop handling in frmAdminBuildJS to determine the destination section using ul.start_divider instead of ul.frm_sorting. Computes newSectionId via the nearest .edit_field_type_divider when present, adding a null-safe path. Other move, cleanup, and debounce behaviors remain unchanged.

Changes

Cohort / File(s)	Summary
Admin drag-and-drop section detection js/src/admin/admin.js	Changes drop target detection to use ul.start_divider via closest(...). Updates newSectionId computation to rely on the nearest .edit_field_type_divider if available, removing explicit class checks and adding null-safety. Retains move, placeholder removal, and debounced sync logic.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant UI as Admin UI (Drag/Drop)
  participant JS as frmAdminBuildJS
  participant DOM as DOM

  U->>UI: Drag field
  U->>UI: Drop over placeholder
  UI->>JS: handleFieldDrop(placeholder, field)
  JS->>DOM: placeholder.closest('ul.start_divider')
  DOM-->>JS: newSection (nullable)

  alt Section found
    JS->>DOM: newSection.closest('.edit_field_type_divider')
    DOM-->>JS: sectionContainer
    JS->>JS: newSectionId = parseInt(sectionContainer.dataset.fid)
  else No section
    JS->>JS: newSectionId = 0
  end

  JS->>DOM: Move field into target position
  JS->>DOM: Remove placeholder
  JS-->>UI: Debounced sync trigger

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix_bug_with_detecting_section_id_when_adding_a_field_to_a_section

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

js/src/admin/admin.js (1)

1001-1001: Nit: add radix to parseInt and use dataset/optional chaining for resilience

Minor hardening and clarity.

-const newSectionId = newSection ? parseInt( newSection.closest( '.edit_field_type_divider' ).getAttribute( 'data-fid' ) ) : 0;
+const newSectionId = newSection
+  ? parseInt( newSection.closest( '.edit_field_type_divider' )?.dataset?.fid ?? '0', 10 )
+  : 0;

You could mirror the radix addition for previousSectionId as well (Line 1000).

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 38b2f4c and 6de4c57.

📒 Files selected for processing (1)

• js/src/admin/admin.js (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: PHP 8 tests in WP trunk
• GitHub Check: PHP 7.4 tests in WP trunk
• GitHub Check: Cypress

🔇 Additional comments (1)

js/src/admin/admin.js (1)

992-992: Correct fix: reliably resolve destination section via ul.start_divider

Using placeholder.closest('ul.start_divider') and a null-safe newSectionId eliminates mis-detection when dropping into a row inside a section (vs top-level/form group). This should resolve the bug where moves into sections reported section_id 0.

Also applies to: 1001-1001