chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search - #5159

Closed
LauraBeatris wants to merge 11 commits into
mainfrom
laura/org-profile-members-search-validation
Closed

chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search#5159
LauraBeatris wants to merge 11 commits into
mainfrom
laura/org-profile-members-search-validation

Conversation

@LauraBeatris

@LauraBeatrisLauraBeatris commented Feb 13, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Description

  • Introduce minimum length to trigger organization memberships search query
  • Refactor and simplify debouncing logic to use useDebounce hook instead of relying on keyup event
  • Update search row width to be partial based on the parent
CleanShot.2025-02-13.at.20.31.57.mp4

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:

@LauraBeatrisLauraBeatris self-assigned this Feb 13, 2025
@changeset-bot

changeset-botBot commented Feb 13, 2025•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c264dc2

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

This PR includes changesets to release 23 packages
NameType
@clerk/clerk-jsMinor
@clerk/typesMinor
@clerk/localizationsMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/uiPatch
@clerk/vuePatch

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

vercelBot commented Feb 13, 2025•
edited
Loading

Copy link
Copy Markdown

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

NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 14, 2025 6:40pm

@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch from 905a136 to 89921a1CompareFebruary 13, 2025 21:48
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch from 89921a1 to 8e3956aCompareFebruary 13, 2025 21:49
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch from 8e3956a to 4ba3605CompareFebruary 13, 2025 21:53
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch from 61cfb18 to 5f0b04cCompareFebruary 13, 2025 22:40
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch 4 times, most recently from c5df69c to 383e89eCompareFebruary 13, 2025 23:02
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch from 52245bc to e829bb9CompareFebruary 13, 2025 23:24
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch from d97775f to 4de61aaCompareFebruary 13, 2025 23:34
@LauraBeatris
LauraBeatris marked this pull request as ready for review February 13, 2025 23:34
@LauraBeatris
LauraBeatris requested a review from a teamFebruary 13, 2025 23:35
@alexcarpenteralexcarpenter mentioned this pull request Feb 13, 2025
Merged
9 tasks
anagstef
anagstef reviewed Feb 14, 2025
View reviewed changes
Comment thread.changeset/tricky-spiders-jog.md
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch from 1574aae to 80f74c9CompareFebruary 14, 2025 15:36
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch 2 times, most recently from 75ef85c to f83adf0CompareFebruary 14, 2025 15:40
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch from 42f185d to c6beeaaCompareFebruary 14, 2025 15:42
alexcarpenter
alexcarpenter reviewed Feb 14, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
return (
<Animated asChild>
<Flex sx={{ width: '100%' }}>
<Flex

@alexcarpenteralexcarpenterFeb 14, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

We should follow up with descriptors for these elements. There currently is no way to target MemberSearchForm elements with the appearance prop.

@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Added a descriptor for the container on 8e0b49d

Now we have the following:

CleanShot 2025-02-14 at 13 58 49

Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx Outdated
<Field.Root {...searchField}>
<InputWithIcon
value={value}
{...searchField.props}

@alexcarpenteralexcarpenterFeb 14, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This is resulting in a bunch of warnings for passing invalid dom props.

Screenshot 2025-02-14 at 11 26 57 AM

@LauraBeatrisLauraBeatrisFeb 14, 2025•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

😢 Ooff, thanks for catching that! I forgot to sanitize the input props... going to push a fix for that

@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Pushed a fix on 4a53af3 - we currently only rely on the blur + focus event handlers from the useFormControl context

@LauraBeatrisLauraBeatris changed the title chore(clerk-js): Introduce minimum length for organization memberships searchchore(clerk-js,types,localizations): Introduce minimum length for organization memberships searchFeb 14, 2025
@LauraBeatris
LauraBeatrisforce-pushed the laura/org-profile-members-search-validation branch from 8e0b49d to c264dc2CompareFebruary 14, 2025 18:39
@LauraBeatris

LauraBeatris commented Feb 14, 2025

Copy link
Copy Markdown
ContributorAuthor

I'll do another review through the changes next week, will avoid merging on a Friday

@LauraBeatris

LauraBeatris commented Feb 17, 2025•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

We decided to park these changes for now in favor of not affecting the UX here due to this "jump" behavior of the input validation.

FAPI PR has also been closed there we won't get a 4xx error even if the query gets sent with less than 3 characters.

Let's keep analyzing the logs for the query performance, and decide later to react on the FAPI data layer instead of forcing the UI to not trigger the query.

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

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@panteliselefpanteliselefAwaiting requested review from panteliselef
+2 more reviewers
@nikospapcomnikospapcomnikospapcom approved these changes
@anagstefanagstefanagstef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@LauraBeatrisLauraBeatris

Labels

clerk-jslocalizationstypes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@LauraBeatris@alexcarpenter@nikospapcom@anagstef@panteliselef@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search - #5159
Closed
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Closed
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search#5159
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Description
  • Introduce minimum length to trigger organization memberships search query
  • Refactor and simplify debouncing logic to use useDebounce hook instead of relying on keyup event
  • Update search row width to be partial based on the parent
CleanShot.2025-02-13.at.20.31.57.mp4
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:
@LauraBeatrisLauraBeatris
self-assigned this
Feb 13, 2025
@changeset-bot
changeset-botBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c264dc2
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/clerk-jsMinor
@clerk/typesMinor
@clerk/localizationsMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/uiPatch
@clerk/vuePatch
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
vercelBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 14, 2025 6:40pm
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
905a136 to
89921a1CompareFebruary 13, 2025 21:48
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
89921a1 to
8e3956aCompareFebruary 13, 2025 21:49
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e3956a to
4ba3605CompareFebruary 13, 2025 21:53
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
61cfb18 to
5f0b04cCompareFebruary 13, 2025 22:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
4 times, most recently
from
c5df69c to
383e89eCompareFebruary 13, 2025 23:02
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
52245bc to
e829bb9CompareFebruary 13, 2025 23:24
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
d97775f to
4de61aaCompareFebruary 13, 2025 23:34
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
February 13, 2025 23:34
@LauraBeatris
LauraBeatris
requested a review
from a teamFebruary 13, 2025 23:35
@alexcarpenteralexcarpenter
mentioned this pull request
Feb 13, 2025
 Merged

9 tasks
anagstef
anagstef
reviewed
Feb 14, 2025
View reviewed changes
Comment thread.changeset/tricky-spiders-jog.md
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
1574aae to
80f74c9CompareFebruary 14, 2025 15:36
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
2 times, most recently
from
75ef85c to
f83adf0CompareFebruary 14, 2025 15:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
42f185d to
c6beeaaCompareFebruary 14, 2025 15:42
alexcarpenter
alexcarpenter
reviewed
Feb 14, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
 return (
 <Animated asChild>
 <Flex sx={{ width: '100%' }}>
 <Flex
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

We should follow up with descriptors for these elements. There currently is no way to target MemberSearchForm elements with the appearance prop.
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added a descriptor for the container on 8e0b49d
Now we have the following:
CleanShot 2025-02-14 at 13 58 49
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
Outdated

 <Field.Root {...searchField}>
 <InputWithIcon
value={value}
{...searchField.props}
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

This is resulting in a bunch of warnings for passing invalid dom props.
Screenshot 2025-02-14 at 11 26 57 AM
@LauraBeatrisLauraBeatrisFeb 14, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

😢 Ooff, thanks for catching that! I forgot to sanitize the input props... going to push a fix for that
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Pushed a fix on 4a53af3 - we currently only rely on the blur + focus event handlers from the useFormControl context
@LauraBeatrisLauraBeatris
changed the title
chore(clerk-js): Introduce minimum length for organization memberships searchchore(clerk-js,types,localizations): Introduce minimum length for organization memberships searchFeb 14, 2025
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e0b49d to
c264dc2CompareFebruary 14, 2025 18:39
@LauraBeatris
LauraBeatris
commented
Feb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
I'll do another review through the changes next week, will avoid merging on a Friday
@LauraBeatris
LauraBeatris
commented
Feb 17, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
We decided to park these changes for now in favor of not affecting the UX here due to this "jump" behavior of the input validation.
FAPI PR has also been closed there we won't get a 4xx error even if the query gets sent with less than 3 characters.
Let's keep analyzing the logs for the query performance, and decide later to react on the FAPI data layer instead of forcing the UI to not trigger the query.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@panteliselefpanteliselefAwaiting requested review from panteliselef

+2 more reviewers

@nikospapcomnikospapcomnikospapcom approved these changes
@anagstefanagstefanagstef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@LauraBeatrisLauraBeatris

Labels

clerk-jslocalizationstypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

6 participants

@LauraBeatris@alexcarpenter@nikospapcom@anagstef@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search - #5159
Closed
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Closed
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search#5159
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Description
  • Introduce minimum length to trigger organization memberships search query
  • Refactor and simplify debouncing logic to use useDebounce hook instead of relying on keyup event
  • Update search row width to be partial based on the parent
CleanShot.2025-02-13.at.20.31.57.mp4
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:
@LauraBeatrisLauraBeatris
self-assigned this
Feb 13, 2025
@changeset-bot
changeset-botBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c264dc2
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/clerk-jsMinor
@clerk/typesMinor
@clerk/localizationsMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/uiPatch
@clerk/vuePatch
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
vercelBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 14, 2025 6:40pm
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
905a136 to
89921a1CompareFebruary 13, 2025 21:48
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
89921a1 to
8e3956aCompareFebruary 13, 2025 21:49
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e3956a to
4ba3605CompareFebruary 13, 2025 21:53
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
61cfb18 to
5f0b04cCompareFebruary 13, 2025 22:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
4 times, most recently
from
c5df69c to
383e89eCompareFebruary 13, 2025 23:02
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
52245bc to
e829bb9CompareFebruary 13, 2025 23:24
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
d97775f to
4de61aaCompareFebruary 13, 2025 23:34
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
February 13, 2025 23:34
@LauraBeatris
LauraBeatris
requested a review
from a teamFebruary 13, 2025 23:35
@alexcarpenteralexcarpenter
mentioned this pull request
Feb 13, 2025
 Merged

9 tasks
anagstef
anagstef
reviewed
Feb 14, 2025
View reviewed changes
Comment thread.changeset/tricky-spiders-jog.md
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
1574aae to
80f74c9CompareFebruary 14, 2025 15:36
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
2 times, most recently
from
75ef85c to
f83adf0CompareFebruary 14, 2025 15:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
42f185d to
c6beeaaCompareFebruary 14, 2025 15:42
alexcarpenter
alexcarpenter
reviewed
Feb 14, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
 return (
 <Animated asChild>
 <Flex sx={{ width: '100%' }}>
 <Flex
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

We should follow up with descriptors for these elements. There currently is no way to target MemberSearchForm elements with the appearance prop.
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added a descriptor for the container on 8e0b49d
Now we have the following:
CleanShot 2025-02-14 at 13 58 49
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
Outdated

 <Field.Root {...searchField}>
 <InputWithIcon
value={value}
{...searchField.props}
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

This is resulting in a bunch of warnings for passing invalid dom props.
Screenshot 2025-02-14 at 11 26 57 AM
@LauraBeatrisLauraBeatrisFeb 14, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

😢 Ooff, thanks for catching that! I forgot to sanitize the input props... going to push a fix for that
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Pushed a fix on 4a53af3 - we currently only rely on the blur + focus event handlers from the useFormControl context
@LauraBeatrisLauraBeatris
changed the title
chore(clerk-js): Introduce minimum length for organization memberships searchchore(clerk-js,types,localizations): Introduce minimum length for organization memberships searchFeb 14, 2025
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e0b49d to
c264dc2CompareFebruary 14, 2025 18:39
@LauraBeatris
LauraBeatris
commented
Feb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
I'll do another review through the changes next week, will avoid merging on a Friday
@LauraBeatris
LauraBeatris
commented
Feb 17, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
We decided to park these changes for now in favor of not affecting the UX here due to this "jump" behavior of the input validation.
FAPI PR has also been closed there we won't get a 4xx error even if the query gets sent with less than 3 characters.
Let's keep analyzing the logs for the query performance, and decide later to react on the FAPI data layer instead of forcing the UI to not trigger the query.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@panteliselefpanteliselefAwaiting requested review from panteliselef

+2 more reviewers

@nikospapcomnikospapcomnikospapcom approved these changes
@anagstefanagstefanagstef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@LauraBeatrisLauraBeatris

Labels

clerk-jslocalizationstypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

6 participants

@LauraBeatris@alexcarpenter@nikospapcom@anagstef@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search - #5159
Closed
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Closed
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search#5159
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Description
  • Introduce minimum length to trigger organization memberships search query
  • Refactor and simplify debouncing logic to use useDebounce hook instead of relying on keyup event
  • Update search row width to be partial based on the parent
CleanShot.2025-02-13.at.20.31.57.mp4
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:
@LauraBeatrisLauraBeatris
self-assigned this
Feb 13, 2025
@changeset-bot
changeset-botBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c264dc2
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/clerk-jsMinor
@clerk/typesMinor
@clerk/localizationsMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/uiPatch
@clerk/vuePatch
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
vercelBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 14, 2025 6:40pm
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
905a136 to
89921a1CompareFebruary 13, 2025 21:48
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
89921a1 to
8e3956aCompareFebruary 13, 2025 21:49
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e3956a to
4ba3605CompareFebruary 13, 2025 21:53
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
61cfb18 to
5f0b04cCompareFebruary 13, 2025 22:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
4 times, most recently
from
c5df69c to
383e89eCompareFebruary 13, 2025 23:02
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
52245bc to
e829bb9CompareFebruary 13, 2025 23:24
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
d97775f to
4de61aaCompareFebruary 13, 2025 23:34
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
February 13, 2025 23:34
@LauraBeatris
LauraBeatris
requested a review
from a teamFebruary 13, 2025 23:35
@alexcarpenteralexcarpenter
mentioned this pull request
Feb 13, 2025
 Merged

9 tasks
anagstef
anagstef
reviewed
Feb 14, 2025
View reviewed changes
Comment thread.changeset/tricky-spiders-jog.md
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
1574aae to
80f74c9CompareFebruary 14, 2025 15:36
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
2 times, most recently
from
75ef85c to
f83adf0CompareFebruary 14, 2025 15:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
42f185d to
c6beeaaCompareFebruary 14, 2025 15:42
alexcarpenter
alexcarpenter
reviewed
Feb 14, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
 return (
 <Animated asChild>
 <Flex sx={{ width: '100%' }}>
 <Flex
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

We should follow up with descriptors for these elements. There currently is no way to target MemberSearchForm elements with the appearance prop.
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added a descriptor for the container on 8e0b49d
Now we have the following:
CleanShot 2025-02-14 at 13 58 49
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
Outdated

 <Field.Root {...searchField}>
 <InputWithIcon
value={value}
{...searchField.props}
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

This is resulting in a bunch of warnings for passing invalid dom props.
Screenshot 2025-02-14 at 11 26 57 AM
@LauraBeatrisLauraBeatrisFeb 14, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

😢 Ooff, thanks for catching that! I forgot to sanitize the input props... going to push a fix for that
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Pushed a fix on 4a53af3 - we currently only rely on the blur + focus event handlers from the useFormControl context
@LauraBeatrisLauraBeatris
changed the title
chore(clerk-js): Introduce minimum length for organization memberships searchchore(clerk-js,types,localizations): Introduce minimum length for organization memberships searchFeb 14, 2025
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e0b49d to
c264dc2CompareFebruary 14, 2025 18:39
@LauraBeatris
LauraBeatris
commented
Feb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
I'll do another review through the changes next week, will avoid merging on a Friday
@LauraBeatris
LauraBeatris
commented
Feb 17, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
We decided to park these changes for now in favor of not affecting the UX here due to this "jump" behavior of the input validation.
FAPI PR has also been closed there we won't get a 4xx error even if the query gets sent with less than 3 characters.
Let's keep analyzing the logs for the query performance, and decide later to react on the FAPI data layer instead of forcing the UI to not trigger the query.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@panteliselefpanteliselefAwaiting requested review from panteliselef

+2 more reviewers

@nikospapcomnikospapcomnikospapcom approved these changes
@anagstefanagstefanagstef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@LauraBeatrisLauraBeatris

Labels

clerk-jslocalizationstypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

6 participants

@LauraBeatris@alexcarpenter@nikospapcom@anagstef@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search - #5159
Closed
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Closed
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search#5159
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Description
  • Introduce minimum length to trigger organization memberships search query
  • Refactor and simplify debouncing logic to use useDebounce hook instead of relying on keyup event
  • Update search row width to be partial based on the parent
CleanShot.2025-02-13.at.20.31.57.mp4
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:
@LauraBeatrisLauraBeatris
self-assigned this
Feb 13, 2025
@changeset-bot
changeset-botBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c264dc2
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/clerk-jsMinor
@clerk/typesMinor
@clerk/localizationsMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/uiPatch
@clerk/vuePatch
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
vercelBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 14, 2025 6:40pm
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
905a136 to
89921a1CompareFebruary 13, 2025 21:48
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
89921a1 to
8e3956aCompareFebruary 13, 2025 21:49
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e3956a to
4ba3605CompareFebruary 13, 2025 21:53
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
61cfb18 to
5f0b04cCompareFebruary 13, 2025 22:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
4 times, most recently
from
c5df69c to
383e89eCompareFebruary 13, 2025 23:02
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
52245bc to
e829bb9CompareFebruary 13, 2025 23:24
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
d97775f to
4de61aaCompareFebruary 13, 2025 23:34
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
February 13, 2025 23:34
@LauraBeatris
LauraBeatris
requested a review
from a teamFebruary 13, 2025 23:35
@alexcarpenteralexcarpenter
mentioned this pull request
Feb 13, 2025
 Merged

9 tasks
anagstef
anagstef
reviewed
Feb 14, 2025
View reviewed changes
Comment thread.changeset/tricky-spiders-jog.md
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
1574aae to
80f74c9CompareFebruary 14, 2025 15:36
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
2 times, most recently
from
75ef85c to
f83adf0CompareFebruary 14, 2025 15:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
42f185d to
c6beeaaCompareFebruary 14, 2025 15:42
alexcarpenter
alexcarpenter
reviewed
Feb 14, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
 return (
 <Animated asChild>
 <Flex sx={{ width: '100%' }}>
 <Flex
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

We should follow up with descriptors for these elements. There currently is no way to target MemberSearchForm elements with the appearance prop.
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added a descriptor for the container on 8e0b49d
Now we have the following:
CleanShot 2025-02-14 at 13 58 49
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
Outdated

 <Field.Root {...searchField}>
 <InputWithIcon
value={value}
{...searchField.props}
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

This is resulting in a bunch of warnings for passing invalid dom props.
Screenshot 2025-02-14 at 11 26 57 AM
@LauraBeatrisLauraBeatrisFeb 14, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

😢 Ooff, thanks for catching that! I forgot to sanitize the input props... going to push a fix for that
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Pushed a fix on 4a53af3 - we currently only rely on the blur + focus event handlers from the useFormControl context
@LauraBeatrisLauraBeatris
changed the title
chore(clerk-js): Introduce minimum length for organization memberships searchchore(clerk-js,types,localizations): Introduce minimum length for organization memberships searchFeb 14, 2025
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e0b49d to
c264dc2CompareFebruary 14, 2025 18:39
@LauraBeatris
LauraBeatris
commented
Feb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
I'll do another review through the changes next week, will avoid merging on a Friday
@LauraBeatris
LauraBeatris
commented
Feb 17, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
We decided to park these changes for now in favor of not affecting the UX here due to this "jump" behavior of the input validation.
FAPI PR has also been closed there we won't get a 4xx error even if the query gets sent with less than 3 characters.
Let's keep analyzing the logs for the query performance, and decide later to react on the FAPI data layer instead of forcing the UI to not trigger the query.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@panteliselefpanteliselefAwaiting requested review from panteliselef

+2 more reviewers

@nikospapcomnikospapcomnikospapcom approved these changes
@anagstefanagstefanagstef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@LauraBeatrisLauraBeatris

Labels

clerk-jslocalizationstypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

6 participants

@LauraBeatris@alexcarpenter@nikospapcom@anagstef@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search - #5159
Closed
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Closed
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search#5159
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Description
  • Introduce minimum length to trigger organization memberships search query
  • Refactor and simplify debouncing logic to use useDebounce hook instead of relying on keyup event
  • Update search row width to be partial based on the parent
CleanShot.2025-02-13.at.20.31.57.mp4
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:
@LauraBeatrisLauraBeatris
self-assigned this
Feb 13, 2025
@changeset-bot
changeset-botBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c264dc2
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/clerk-jsMinor
@clerk/typesMinor
@clerk/localizationsMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/uiPatch
@clerk/vuePatch
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
vercelBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 14, 2025 6:40pm
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
905a136 to
89921a1CompareFebruary 13, 2025 21:48
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
89921a1 to
8e3956aCompareFebruary 13, 2025 21:49
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e3956a to
4ba3605CompareFebruary 13, 2025 21:53
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
61cfb18 to
5f0b04cCompareFebruary 13, 2025 22:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
4 times, most recently
from
c5df69c to
383e89eCompareFebruary 13, 2025 23:02
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
52245bc to
e829bb9CompareFebruary 13, 2025 23:24
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
d97775f to
4de61aaCompareFebruary 13, 2025 23:34
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
February 13, 2025 23:34
@LauraBeatris
LauraBeatris
requested a review
from a teamFebruary 13, 2025 23:35
@alexcarpenteralexcarpenter
mentioned this pull request
Feb 13, 2025
 Merged

9 tasks
anagstef
anagstef
reviewed
Feb 14, 2025
View reviewed changes
Comment thread.changeset/tricky-spiders-jog.md
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
1574aae to
80f74c9CompareFebruary 14, 2025 15:36
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
2 times, most recently
from
75ef85c to
f83adf0CompareFebruary 14, 2025 15:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
42f185d to
c6beeaaCompareFebruary 14, 2025 15:42
alexcarpenter
alexcarpenter
reviewed
Feb 14, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
 return (
 <Animated asChild>
 <Flex sx={{ width: '100%' }}>
 <Flex
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

We should follow up with descriptors for these elements. There currently is no way to target MemberSearchForm elements with the appearance prop.
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added a descriptor for the container on 8e0b49d
Now we have the following:
CleanShot 2025-02-14 at 13 58 49
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
Outdated

 <Field.Root {...searchField}>
 <InputWithIcon
value={value}
{...searchField.props}
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

This is resulting in a bunch of warnings for passing invalid dom props.
Screenshot 2025-02-14 at 11 26 57 AM
@LauraBeatrisLauraBeatrisFeb 14, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

😢 Ooff, thanks for catching that! I forgot to sanitize the input props... going to push a fix for that
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Pushed a fix on 4a53af3 - we currently only rely on the blur + focus event handlers from the useFormControl context
@LauraBeatrisLauraBeatris
changed the title
chore(clerk-js): Introduce minimum length for organization memberships searchchore(clerk-js,types,localizations): Introduce minimum length for organization memberships searchFeb 14, 2025
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e0b49d to
c264dc2CompareFebruary 14, 2025 18:39
@LauraBeatris
LauraBeatris
commented
Feb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
I'll do another review through the changes next week, will avoid merging on a Friday
@LauraBeatris
LauraBeatris
commented
Feb 17, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
We decided to park these changes for now in favor of not affecting the UX here due to this "jump" behavior of the input validation.
FAPI PR has also been closed there we won't get a 4xx error even if the query gets sent with less than 3 characters.
Let's keep analyzing the logs for the query performance, and decide later to react on the FAPI data layer instead of forcing the UI to not trigger the query.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@panteliselefpanteliselefAwaiting requested review from panteliselef

+2 more reviewers

@nikospapcomnikospapcomnikospapcom approved these changes
@anagstefanagstefanagstef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@LauraBeatrisLauraBeatris

Labels

clerk-jslocalizationstypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

6 participants

@LauraBeatris@alexcarpenter@nikospapcom@anagstef@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search - #5159
Closed
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Closed
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search#5159
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Description
  • Introduce minimum length to trigger organization memberships search query
  • Refactor and simplify debouncing logic to use useDebounce hook instead of relying on keyup event
  • Update search row width to be partial based on the parent
CleanShot.2025-02-13.at.20.31.57.mp4
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:
@LauraBeatrisLauraBeatris
self-assigned this
Feb 13, 2025
@changeset-bot
changeset-botBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c264dc2
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/clerk-jsMinor
@clerk/typesMinor
@clerk/localizationsMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/uiPatch
@clerk/vuePatch
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
vercelBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 14, 2025 6:40pm
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
905a136 to
89921a1CompareFebruary 13, 2025 21:48
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
89921a1 to
8e3956aCompareFebruary 13, 2025 21:49
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e3956a to
4ba3605CompareFebruary 13, 2025 21:53
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
61cfb18 to
5f0b04cCompareFebruary 13, 2025 22:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
4 times, most recently
from
c5df69c to
383e89eCompareFebruary 13, 2025 23:02
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
52245bc to
e829bb9CompareFebruary 13, 2025 23:24
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
d97775f to
4de61aaCompareFebruary 13, 2025 23:34
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
February 13, 2025 23:34
@LauraBeatris
LauraBeatris
requested a review
from a teamFebruary 13, 2025 23:35
@alexcarpenteralexcarpenter
mentioned this pull request
Feb 13, 2025
 Merged

9 tasks
anagstef
anagstef
reviewed
Feb 14, 2025
View reviewed changes
Comment thread.changeset/tricky-spiders-jog.md
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
1574aae to
80f74c9CompareFebruary 14, 2025 15:36
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
2 times, most recently
from
75ef85c to
f83adf0CompareFebruary 14, 2025 15:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
42f185d to
c6beeaaCompareFebruary 14, 2025 15:42
alexcarpenter
alexcarpenter
reviewed
Feb 14, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
 return (
 <Animated asChild>
 <Flex sx={{ width: '100%' }}>
 <Flex
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

We should follow up with descriptors for these elements. There currently is no way to target MemberSearchForm elements with the appearance prop.
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added a descriptor for the container on 8e0b49d
Now we have the following:
CleanShot 2025-02-14 at 13 58 49
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
Outdated

 <Field.Root {...searchField}>
 <InputWithIcon
value={value}
{...searchField.props}
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

This is resulting in a bunch of warnings for passing invalid dom props.
Screenshot 2025-02-14 at 11 26 57 AM
@LauraBeatrisLauraBeatrisFeb 14, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

😢 Ooff, thanks for catching that! I forgot to sanitize the input props... going to push a fix for that
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Pushed a fix on 4a53af3 - we currently only rely on the blur + focus event handlers from the useFormControl context
@LauraBeatrisLauraBeatris
changed the title
chore(clerk-js): Introduce minimum length for organization memberships searchchore(clerk-js,types,localizations): Introduce minimum length for organization memberships searchFeb 14, 2025
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e0b49d to
c264dc2CompareFebruary 14, 2025 18:39
@LauraBeatris
LauraBeatris
commented
Feb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
I'll do another review through the changes next week, will avoid merging on a Friday
@LauraBeatris
LauraBeatris
commented
Feb 17, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
We decided to park these changes for now in favor of not affecting the UX here due to this "jump" behavior of the input validation.
FAPI PR has also been closed there we won't get a 4xx error even if the query gets sent with less than 3 characters.
Let's keep analyzing the logs for the query performance, and decide later to react on the FAPI data layer instead of forcing the UI to not trigger the query.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@panteliselefpanteliselefAwaiting requested review from panteliselef

+2 more reviewers

@nikospapcomnikospapcomnikospapcom approved these changes
@anagstefanagstefanagstef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@LauraBeatrisLauraBeatris

Labels

clerk-jslocalizationstypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

6 participants

@LauraBeatris@alexcarpenter@nikospapcom@anagstef@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search - #5159
Closed
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Closed
chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search#5159
LauraBeatris wants to merge 11 commits into
mainfrom 
laura/org-profile-members-search-validation
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Description
  • Introduce minimum length to trigger organization memberships search query
  • Refactor and simplify debouncing logic to use useDebounce hook instead of relying on keyup event
  • Update search row width to be partial based on the parent
CleanShot.2025-02-13.at.20.31.57.mp4
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:
@LauraBeatrisLauraBeatris
self-assigned this
Feb 13, 2025
@changeset-bot
changeset-botBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c264dc2
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/clerk-jsMinor
@clerk/typesMinor
@clerk/localizationsMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/uiPatch
@clerk/vuePatch
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
vercelBot
commented
Feb 13, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 14, 2025 6:40pm
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
905a136 to
89921a1CompareFebruary 13, 2025 21:48
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
89921a1 to
8e3956aCompareFebruary 13, 2025 21:49
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e3956a to
4ba3605CompareFebruary 13, 2025 21:53
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
61cfb18 to
5f0b04cCompareFebruary 13, 2025 22:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
4 times, most recently
from
c5df69c to
383e89eCompareFebruary 13, 2025 23:02
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
52245bc to
e829bb9CompareFebruary 13, 2025 23:24
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
d97775f to
4de61aaCompareFebruary 13, 2025 23:34
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
February 13, 2025 23:34
@LauraBeatris
LauraBeatris
requested a review
from a teamFebruary 13, 2025 23:35
@alexcarpenteralexcarpenter
mentioned this pull request
Feb 13, 2025
 Merged

9 tasks
anagstef
anagstef
reviewed
Feb 14, 2025
View reviewed changes
Comment thread.changeset/tricky-spiders-jog.md
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
1574aae to
80f74c9CompareFebruary 14, 2025 15:36
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
2 times, most recently
from
75ef85c to
f83adf0CompareFebruary 14, 2025 15:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
42f185d to
c6beeaaCompareFebruary 14, 2025 15:42
alexcarpenter
alexcarpenter
reviewed
Feb 14, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
 return (
 <Animated asChild>
 <Flex sx={{ width: '100%' }}>
 <Flex
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

We should follow up with descriptors for these elements. There currently is no way to target MemberSearchForm elements with the appearance prop.
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added a descriptor for the container on 8e0b49d
Now we have the following:
CleanShot 2025-02-14 at 13 58 49
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
Outdated

 <Field.Root {...searchField}>
 <InputWithIcon
value={value}
{...searchField.props}
@alexcarpenteralexcarpenterFeb 14, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

This is resulting in a bunch of warnings for passing invalid dom props.
Screenshot 2025-02-14 at 11 26 57 AM
@LauraBeatrisLauraBeatrisFeb 14, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

😢 Ooff, thanks for catching that! I forgot to sanitize the input props... going to push a fix for that
@LauraBeatrisLauraBeatrisFeb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Pushed a fix on 4a53af3 - we currently only rely on the blur + focus event handlers from the useFormControl context
@LauraBeatrisLauraBeatris
changed the title
chore(clerk-js): Introduce minimum length for organization memberships searchchore(clerk-js,types,localizations): Introduce minimum length for organization memberships searchFeb 14, 2025
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/org-profile-members-search-validation
branch
from
8e0b49d to
c264dc2CompareFebruary 14, 2025 18:39
@LauraBeatris
LauraBeatris
commented
Feb 14, 2025

Copy link


Copy Markdown

ContributorAuthor
I'll do another review through the changes next week, will avoid merging on a Friday
@LauraBeatris
LauraBeatris
commented
Feb 17, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
We decided to park these changes for now in favor of not affecting the UX here due to this "jump" behavior of the input validation.
FAPI PR has also been closed there we won't get a 4xx error even if the query gets sent with less than 3 characters.
Let's keep analyzing the logs for the query performance, and decide later to react on the FAPI data layer instead of forcing the UI to not trigger the query.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@panteliselefpanteliselefAwaiting requested review from panteliselef

+2 more reviewers

@nikospapcomnikospapcomnikospapcom approved these changes
@anagstefanagstefanagstef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@LauraBeatrisLauraBeatris

Labels

clerk-jslocalizationstypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

6 participants

@LauraBeatris@alexcarpenter@nikospapcom@anagstef@panteliselef@clerk-cookie