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

[react/form] Fix Form.Message not being able to be used outside a Form.Field #3044

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+52 −4
Open

[react/form] Fix Form.Message not being able to be used outside a Form.Field #3044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8a80bb
fix: Form.Message to be used in and out of Form.Field context, as the…
DGiannaris Aug 1, 2024
1ebb106
chore: add versions yml
DGiannaris Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions .yarn/versions/52f80f42.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
releases:
"@radix-ui/react-context": patch
"@radix-ui/react-form": patch

declined:
- primitives
- "@radix-ui/react-accordion"
- "@radix-ui/react-alert-dialog"
- "@radix-ui/react-avatar"
- "@radix-ui/react-checkbox"
- "@radix-ui/react-collapsible"
- "@radix-ui/react-collection"
- "@radix-ui/react-context-menu"
- "@radix-ui/react-dialog"
- "@radix-ui/react-dropdown-menu"
- "@radix-ui/react-hover-card"
- "@radix-ui/react-menu"
- "@radix-ui/react-menubar"
- "@radix-ui/react-navigation-menu"
- "@radix-ui/react-popover"
- "@radix-ui/react-popper"
- "@radix-ui/react-progress"
- "@radix-ui/react-radio-group"
- "@radix-ui/react-roving-focus"
- "@radix-ui/react-scroll-area"
- "@radix-ui/react-select"
- "@radix-ui/react-slider"
- "@radix-ui/react-switch"
- "@radix-ui/react-tabs"
- "@radix-ui/react-toast"
- "@radix-ui/react-toggle-group"
- "@radix-ui/react-toolbar"
- "@radix-ui/react-tooltip"
10 changes: 8 additions & 2 deletions packages/react/context/src/createContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,18 @@ function createContextScope(scopeName: string, createContextScopeDeps: CreateSco
return <Context.Provider value={value}>{children}</Context.Provider>;
}

function useContext(consumerName: string, scope: Scope<ContextValueType | undefined>) {
function useContext(
consumerName: string,
scope: Scope<ContextValueType | undefined>,
options: { isOptional?: boolean } = {}
) {
const Context = scope?.[scopeName][index] || BaseContext;
const context = React.useContext(Context);
const { isOptional } = options;
if (isOptional) return {} as ContextValueType;
if (context) return context;
if (defaultContext !== undefined) return defaultContext;
// if a defaultContext wasn't specified, it's a required context.
// if a defaultContext wasn't specified and isOptional is false, it's a required context.
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
}

Expand Down
3 changes: 2 additions & 1 deletion packages/react/form/src/Form.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,11 @@ export const Cypress = () => {
<Form.Field name="name">
<Form.Label>Name (required)</Form.Label>
<Form.Control type="text" required />
<Form.Message match="valueMissing" />
<Form.Message match="valid">valid!</Form.Message>
</Form.Field>

{/* This Form.Message is used out of the Form.Field context */}
<Form.Message match="valueMissing" name="name" />
<Form.Field name="age">
<Form.Label>Age (0-99)</Form.Label>
<Form.Control type="number" min="0" max="99" step="1" />
Expand Down
10 changes: 9 additions & 1 deletion packages/react/form/src/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,9 +462,17 @@ interface FormMessageProps extends Omit<FormMessageImplProps, 'name'> {
const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(
(props: ScopedProps<FormMessageProps>, forwardedRef) => {
const { match, name: nameProp, ...messageProps } = props;
const fieldContext = useFormFieldContext(MESSAGE_NAME, props.__scopeForm);
const fieldContext = useFormFieldContext(MESSAGE_NAME, props.__scopeForm, {
isOptional: !!nameProp,
});
const name = nameProp ?? fieldContext.name;

if (!nameProp && !fieldContext?.name) {
throw new Error(
`\`${MESSAGE_NAME}\` must be used within \`${FIELD_NAME}\` or specify the \`name\` prop`
);
}

if (match === undefined) {
return (
<FormMessageImpl {...messageProps} ref={forwardedRef} name={name}>
Expand Down