Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(clerk-js,types): Add modalsCloseOnClickOutside option #5139

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat(clerk-js,types): Add modalsCloseOnClickOutside option #5139

wants to merge 4 commits into from

Conversation

alexcarpenter
Copy link
Member

@alexcarpenter alexcarpenter commented Feb 12, 2025 •
edited
Loading

Description

Introduce new option modalsCloseOnClickOutside to disable closing modals when users click outside of the modal element on the modal overlay.

<ClerkProvider modalsCloseOnClickOutside={false}>...</ClerkProvider>
Screen.Recording.2025-02-12.at.3.45.10.PM.mov

Resolves SDKI-810

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Feb 12, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 7155cb4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 23 packages
Name Type
@clerk/clerk-js Minor
@clerk/types Minor
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch
@clerk/agent-toolkit Patch
@clerk/astro Patch
@clerk/backend Patch
@clerk/elements Patch
@clerk/expo-passkeys Patch
@clerk/express Patch
@clerk/fastify Patch
@clerk/localizations Patch
@clerk/nextjs Patch
@clerk/nuxt Patch
@clerk/react-router Patch
@clerk/clerk-react Patch
@clerk/remix Patch
@clerk/shared Patch
@clerk/tanstack-start Patch
@clerk/testing Patch
@clerk/themes Patch
@clerk/ui Patch
@clerk/vue Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel Vercel
Copy link

vercel bot commented Feb 12, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
clerk-js-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 14, 2025 8:14pm

@alexcarpenter
Copy link
Member Author

!snapshot

@clerk-cookie
Copy link
Collaborator

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package Version
@clerk/agent-toolkit 0.0.2-snapshot.v20250212204659
@clerk/astro 2.2.0-snapshot.v20250212204659
@clerk/backend 1.24.1-snapshot.v20250212204659
@clerk/chrome-extension 2.2.9-snapshot.v20250212204659
@clerk/clerk-js 5.53.0-snapshot.v20250212204659
@clerk/elements 0.22.22-snapshot.v20250212204659
@clerk/clerk-expo 2.7.7-snapshot.v20250212204659
@clerk/expo-passkeys 0.1.20-snapshot.v20250212204659
@clerk/express 1.3.48-snapshot.v20250212204659
@clerk/fastify 2.1.21-snapshot.v20250212204659
@clerk/localizations 3.10.6-snapshot.v20250212204659
@clerk/nextjs 6.11.3-snapshot.v20250212204659
@clerk/nuxt 1.1.4-snapshot.v20250212204659
@clerk/clerk-react 5.22.13-snapshot.v20250212204659
@clerk/react-router 1.0.8-snapshot.v20250212204659
@clerk/remix 4.4.24-snapshot.v20250212204659
@clerk/shared 2.21.1-snapshot.v20250212204659
@clerk/tanstack-start 0.9.6-snapshot.v20250212204659
@clerk/testing 1.4.22-snapshot.v20250212204659
@clerk/themes 2.2.18-snapshot.v20250212204659
@clerk/types 4.46.0-snapshot.v20250212204659
@clerk/ui 0.3.23-snapshot.v20250212204659
@clerk/upgrade 1.2.4-snapshot.v20250212204659
@clerk/vue 1.1.12-snapshot.v20250212204659

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/ui

npm i @clerk/[email protected] --save-exact

@clerk/upgrade

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

@alexcarpenter alexcarpenter marked this pull request as ready for review February 12, 2025 20:50
panteliselef
panteliselef requested changes Feb 13, 2025
View reviewed changes
Copy link
Member

@panteliselef panteliselef left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Requested changes to avoid breaking captcha if merged. Other than that, it looks good

anagstef
anagstef reviewed Feb 13, 2025
View reviewed changes
packages/clerk-js/src/ui/elements/Modal.tsx
const { disableScroll, enableScroll } = useScrollLock(document.body);
const overlayRef = useRef<HTMLDivElement>(null);
const { floating, isOpen, context, nodeId, toggle } = usePopover({
defaultOpen: true,
autoUpdate: false,
outsidePress: e => e.target === overlayRef.current,
outsidePress: outsidePress === true ? e => e.target === overlayRef.current : false,
Copy link
Member

Choose a reason for hiding this comment

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

is this different from the canCloseModal property?

Copy link
Member Author

Choose a reason for hiding this comment

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

canCloseModal prevents closing the modal entirely, close icon is removed to. canCloseModal is used within the useDismiss hook. This is also an internal only prop.

Copy link
Member

Choose a reason for hiding this comment

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

Thank you for explaining. Initially, I thought it would be a little confusing having both of these properties at the same time.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, no problem, I can see how the naming can be confusing. Still noodling on names, let me know if you have opinions #5139 (comment)

Copy link
Member Author

Choose a reason for hiding this comment

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

I've also went ahead and added comments to clarify the different functionality 7155cb4

panteliselef
panteliselef approved these changes Feb 13, 2025
View reviewed changes
Copy link
Member

@panteliselef panteliselef left a comment

Choose a reason for hiding this comment

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

Let's iterate a bit on the naming, if possible.

@alexcarpenter alexcarpenter marked this pull request as draft February 13, 2025 16:17
@alexcarpenter
Copy link
Member Author

alexcarpenter commented Feb 14, 2025 •
edited
Loading

@clerk/sdk-infra any ideas on naming preferences for this functionality?

My other thought is modalsDismissable, but can be confusing as this is only controlling clicking outside of the modals.

@brkalow
Copy link
Member

brkalow commented Feb 14, 2025

@alexcarpenter WDYT about closeModalsOnClickOutside?

@alexcarpenter
Copy link
Member Author

@alexcarpenter WDYT about closeModalsOnClickOutside?

assuming @panteliselef would have the same issues with that as I think the length was the problem if I remember correctly.

@panteliselef
Copy link
Member

Let's not delay this further, I cannot come up with a shorter name unfortunately.

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

@anagstef anagstef anagstef left review comments

@panteliselef panteliselef panteliselef approved these changes

Assignees
No one assigned
Labels
clerk-js types
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@alexcarpenter @clerk-cookie @brkalow @panteliselef @anagstef