feat: Allow disabling auto-scroll using ui.disable-auto-scroll

[hariombalhara]

Allow disabling auto scroll by passing config['ui.autoscroll']="false"

Here is how a config param can be set https://cal.com/help/embedding/prefill-booking-form-embed

Fixes PRI-310

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
cal	Ignored			Sep 1, 2025 1:00pm
cal-eu	Ignored			Sep 1, 2025 1:00pm

[coderabbitai]

Walkthrough

Adds a runtime UI flag to opt out of automatic scrolling in embeds. Introduces disableAutoScroll?: boolean on UiConfig and adds "ui.autoscroll"?: "true" | "false" to KnownConfig. Marks ui.autoscroll as a known config key in utils, reads the ui.autoscroll query/config value in embed-iframe.ts to set embedStore.uiConfig.disableAutoScroll, and conditions Booker.tsx’s scrollToTimeSlots on that flag.

Assessment against linked issues

Objective (issue)	Addressed	Explanation
Provide an option to disable embed auto-scroll so integrators can opt out (PRI-310)	✅

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

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 e70be71 and 8eef3f2.

📒 Files selected for processing (4)

• packages/embeds/embed-core/src/embed-iframe.ts (1 hunks)
• packages/embeds/embed-core/src/lib/utils.ts (1 hunks)
• packages/embeds/embed-core/src/types.ts (2 hunks)
• packages/features/bookings/Booker/Booker.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (4)

• packages/embeds/embed-core/src/types.ts
• packages/embeds/embed-core/src/lib/utils.ts
• packages/embeds/embed-core/src/embed-iframe.ts
• packages/features/bookings/Booker/Booker.tsx

⏰ 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

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch disable-auto-scroll-configurable

---

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.

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.

[hariombalhara]

• feat: Allow disabling auto-scroll using ui.disable-auto-scroll #23462 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

packages/embeds/embed-core/src/types.ts (1)

35-36: Add brief JSDoc and confirm default behavior.

Good addition. Please document that the default (absent) value is treated as false so existing embeds keep auto-scrolling.

packages/features/bookings/Booker/Booker.tsx (1)

11-11: Unify import source for embed hooks.

You import useEmbedUiConfig from "@calcom/embed-core/embed-iframe" but updateEmbedBookerState from "@calcom/embed-core/src/embed-iframe". Prefer a single public entrypoint (and re-export if needed) for consistency.

packages/embeds/embed-core/src/lib/utils.ts (1)

75-84: Recognizing the new key here is correct; consider reducing drift risk.

Approved. As a follow-up, consider deriving this list from a single typed source (e.g., a const object) to keep it in lockstep with KnownConfig.

📜 Review details

Configuration used: Path: .coderabbit.yaml

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 bfa23dd and 5235565.

📒 Files selected for processing (4)

• packages/embeds/embed-core/src/embed-iframe.ts (1 hunks)
• packages/embeds/embed-core/src/lib/utils.ts (1 hunks)
• packages/embeds/embed-core/src/types.ts (2 hunks)
• packages/features/bookings/Booker/Booker.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.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/bookings/Booker/Booker.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/bookings/Booker/Booker.tsx
• packages/embeds/embed-core/src/lib/utils.ts
• packages/embeds/embed-core/src/types.ts
• packages/embeds/embed-core/src/embed-iframe.ts

**/*.{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/bookings/Booker/Booker.tsx
• packages/embeds/embed-core/src/lib/utils.ts
• packages/embeds/embed-core/src/types.ts
• packages/embeds/embed-core/src/embed-iframe.ts

**/*.ts

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

**/*.ts: For Prisma queries, only select data you need; never use include, always use select
Ensure the credential.key field is never returned from tRPC endpoints or APIs

Files:

• packages/embeds/embed-core/src/lib/utils.ts
• packages/embeds/embed-core/src/types.ts
• packages/embeds/embed-core/src/embed-iframe.ts

🧠 Learnings (1)

📚 Learning: 2025-08-29T22:57:31.398Z

Learnt from: bandhan-majumder
PR: calcom/cal.com#23454
File: packages/features/bookings/Booker/components/EventMeta.tsx:16-16
Timestamp: 2025-08-29T22:57:31.398Z
Learning: In Cal.com's Booker architecture, components become client-side through BookerStoreProvider.tsx which has "use client". Any component using useBookerStoreContext automatically runs on the client and should use client-appropriate utilities like markdownToSafeHTMLClient, regardless of whether they have explicit "use client" directives.

Applied to files:

• packages/features/bookings/Booker/Booker.tsx

🧬 Code graph analysis (1)

packages/features/bookings/Booker/Booker.tsx (1)

packages/embeds/embed-core/src/embed-iframe.ts (1)

• useEmbedUiConfig (179-190)

🔇 Additional comments (3)

packages/embeds/embed-core/src/types.ts (1)

67-74: Stringly-typed config key looks consistent; ensure docs mention both forms.

The KnownConfig key mirrors other boolean flags ("true"/"false"). Please update public docs to show both:

• URL/config: ui.disable-auto-scroll=true|false
• UiConfig: disableAutoScroll?: boolean

packages/embeds/embed-core/src/embed-iframe.ts (1)

582-587: Propagate ui.disable-auto-scroll in connect()
In packages/embeds/embed-core/src/embed-iframe.ts, inside connect(…) after you pull out queryParamsFromConfig, propagate the "ui.disable-auto-scroll" flag into embedStore.uiConfig via runAllUiSetters(). Optionally do the same for ui.color-scheme and layout to keep runtime UI settings consistent.

packages/features/bookings/Booker/Booker.tsx (1)

169-176: Gating logic is correct and preserves default behavior.

The check defers auto-scroll only when disableAutoScroll is true; undefined keeps current behavior. Looks good.

Please verify on mobile + embed:

• No ui.disable-auto-scroll: auto-scroll occurs once on first interaction.
• ui.disable-auto-scroll=true: no auto-scroll.

[linear]

PRI-310

[github-actions]

E2E results are ready!

• Workflow #74733.2 latest results

[emrysal]

LGTM 🚀