fix: Form Builder Name Field Shows Default Label When Custom Label is Empty

[kartik-212004]

What does this PR do?

Fixes #24200
Fixes CAL-6498

• Fixes form builder name field showing raw identifier instead of default label when custom label is empty
• Ensures consistent UX across all system fields in the form builder
• Updates FieldLabel component to properly handle empty or meaningless labels

Problem: In the Event Types form builder, when the custom label for the "name" field is removed or empty, it shows no label or the raw field identifier (like "your_name") instead of falling back to "Name" like the email field correctly shows "Email address".

Solution: Updated the FieldLabel component to check if a label is meaningful (not empty and not the same as the field name) before using it, otherwise fall back to the translated default label.

Visual Demo (For contributors especially)

Before:

2025-10-01.14-49-12.mp4

After:

2025-10-01.14-52-36.mp4

Image Demo:

Before:

• Name field with empty label shows nothing
• Inconsistent behavior compared to email field

After:

• Name field with empty label shows "Name"
• Consistent behavior across all system fields
• Better UX for form builders

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

Steps to Reproduce

1. Navigate to Event Types and create or edit an event type
2. Go to the "Advanced" tab or form builder section
3. Locate the existing "Name" question field in the form builder
4. Clear the "Label" field value completely
5. Observe that the field label now shows Name when no label is there
6. For comparison, check the "Email" field behavior - it shows "Email address" even when label is empty

---

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The PR makes minor cleanups in FormBuilder components and updates label handling. It removes unused variables and inline eslint comments, and simplifies a truthiness check for rendering a component. The functional change is in FieldLabel: when the computed label is empty, it now derives and renders a default label from the field configuration (variants map), instead of leaving the label blank. No exported or public API declarations were changed.

Possibly related PRs

• fix: dutch appearing in booking field name #23364: Adjusts API behavior to return empty strings for label/placeholder; complements this PR’s UI fallback logic when labels resolve to empty.

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	In addition to the main fix, the PR includes unrelated linting and cleanup edits—removal of eslint comments, elimination of an unused variable, and refactoring of double-negation checks—that are not directly tied to the linked issues’ objectives.	Please separate the linting and cleanup changes into a distinct commit or pull request to maintain focus on the fallback behavior fix for the name field.
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The provided title succinctly and accurately describes the primary change—fixing the Form Builder Name field to display a default label when the custom label is empty—using a conventional commit prefix and focusing on the main behavioral fix.
Linked Issues Check	✅ Passed	The changes to the FieldLabel component implement the intended fallback behavior for empty or meaningless labels, align the name field behavior with other system fields, include automated tests, and directly address all objectives from issues #24200 and CAL-6498 regarding UX consistency and default label display.
Description Check	✅ Passed	The PR description clearly outlines the bug being fixed, the solution implemented, references both linked issues and visual demos, and provides reproducible steps, demonstrating that it is directly related to the changeset and not off-topic.

---

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

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

[vercel]

@kartik-212004 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title " fix: Form Builder Name Field Shows Default Label When Custom Label is Empty". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• 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 52a5afe and 4c316e8.

📒 Files selected for processing (2)

• apps/web/modules/bookings/views/bookings-listing-view.tsx (3 hunks)
• packages/features/form-builder/FormBuilder.tsx (4 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Always use t() for text localization in frontend code; direct text embedding should trigger a warning

Files:

• packages/features/form-builder/FormBuilder.tsx
• apps/web/modules/bookings/views/bookings-listing-view.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Files:

• packages/features/form-builder/FormBuilder.tsx
• apps/web/modules/bookings/views/bookings-listing-view.tsx

**/*.{ts,tsx,js,jsx}

⚙️ CodeRabbit configuration file

Flag default exports and encourage named exports. Named exports provide better tree-shaking, easier refactoring, and clearer imports. Exempt main components like pages, layouts, and components that serve as the primary export of a module.

Files:

• packages/features/form-builder/FormBuilder.tsx
• apps/web/modules/bookings/views/bookings-listing-view.tsx

🧠 Learnings (1)

📓 Common learnings

Learnt from: supalarry
PR: calcom/cal.com#23364
File: apps/api/v2/src/ee/event-types/event-types_2024_06_14/transformers/internal-to-api/internal-to-api.spec.ts:295-296
Timestamp: 2025-08-27T13:32:46.887Z
Learning: In calcom/cal.com, when transforming booking fields from internal to API format, tests in organizations-event-types.e2e-spec.ts already expect name field label and placeholder to be empty strings ("") rather than undefined. PR changes that set these to explicit empty strings are typically fixing implementation to match existing test expectations rather than breaking changes.

🧬 Code graph analysis (1)

apps/web/modules/bookings/views/bookings-listing-view.tsx (1)

packages/features/data-table/components/DataTableWrapper.tsx (1)

• DataTableWrapper (44-154)

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

• GitHub Check: Install dependencies / Yarn install & cache

🔇 Additional comments (4)

packages/features/form-builder/FormBuilder.tsx (3)

429-429: LGTM: Clean removal of unused comment.

Removing unused comments improves code cleanliness without affecting behavior.

---

701-701: LGTM: Simplified truthiness check.

Removing the double-negation makes the code cleaner while maintaining the same behavior.

---

902-909: Core fix looks good, but consider whitespace-only labels.

The fallback logic correctly addresses the PR objective by falling back to the default translated label when the custom label is empty. The implementation properly uses t() for localization as required.

However, the PR description mentions the bug occurs when the label "contains only whitespace," but the current check !label only catches empty strings, not whitespace-only strings like " ".

Consider whether whitespace-only labels should also trigger the fallback. If so, apply this diff:

   // If no custom label is set, fall back to the defaultLabel from field config
-  if (!label) {
+  if (!label || !label.trim()) {
     const fieldName =

As per coding guidelines.

apps/web/modules/bookings/views/bookings-listing-view.tsx (1)

379-395: Error guard keeps table state sane

Nice touch short-circuiting finalData when the query errors—this prevents stale rows from leaking into the table and keeps the wrapper’s empty/error view logic consistent.

[pallava-joshi]

left suggestions

[pallava-joshi]

tested locally, working fine.

[cubic-dev-ai]

No issues found across 1 file

[github-actions]

E2E results are ready!

• Workflow #87200.1 latest results

[github-actions]

Devin AI is resolving merge conflicts

This PR has merge conflicts with the main branch. A Devin session has been created to automatically resolve them.

View Devin Session

Devin will:

1. Merge the latest main into this branch
2. Resolve any conflicts intelligently
3. Run lint/type checks to ensure validity
4. Push the resolved changes

If you prefer to resolve conflicts manually, you can close the Devin session and handle it yourself.

[github-actions]

Devin AI is resolving merge conflicts

This PR has merge conflicts with the main branch. A Devin session has been created to automatically resolve them.

View Devin Session

Devin will:

1. Merge the latest main into this branch
2. Resolve any conflicts intelligently
3. Run lint/type checks to ensure validity
4. Push the resolved changes

If you prefer to resolve conflicts manually, you can close the Devin session and handle it yourself.

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.

dismissed

dismissed

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 7 additional findings in Devin Review.