Skip to content

Use empty context for conditionals #5500

Open
@runfaj

Description

@runfaj

Provide a general summary of the issue here

This is kind of a bug and kind of a feature request, since behavior seems to vary across components. An example problem I'd like to solve is when inside a form, I'd like to automatically add some behavior and styling for any components contained within that form. For example, maybe a textfield on its own doesn't have a margin bottom, but if in a form, it would so there is consistent spacing between fields.

I would expect context to play the role in this and just be able to detect if context is present or has a value. However, at present, a form always provides an empty object (which matches the default context initialized) unless there's an error state, so there's no way to detect if in the form context or not.
context defined:

export const FormValidationContext = createContext<ValidationErrors>({});

form provider:
<FormValidationContext.Provider value={validationErrors ?? {}}>

An obvious solution I can implement is my own form context, but that now means requiring my own form component wrapping the react-aria form, which seems like unnecessary overhead. I haven't tested other components, but similar situations might also appear in other contexts (like a custom label inside a textfield would need auto-spacing between the label and textfield).

🤔 Expected Behavior?

A context should always provide some value, never an empty object, so a child can detect if in another context or not.

😯 Current Behavior

See general summary

💁 Possible Solution

Ensure all react-aria components when defining a provider, also provide information in the context. Because there is context merging, maybe an object can't be avoided (null as default context would be ideal), but maybe the provider value could use something like { key: _.uniqueId() } so there's at least something to distinguish between the provider value and the default context value.

🔦 Context

No response

🖥️ Steps to Reproduce

See above

Version

1.0.0-rc.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

windows 11 and mac 14

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions