TextField: No possibility to pass props into input

[artola]

Provide a general summary of the issue here

Change done to TextField by changing the InputContext by FieldInputContext is a breaking change.
Before it was possible to pass props and ref to the input element, now it is not possible.

react-spectrum/packages/react-aria-components/src/TextField.tsx

Line 66 in 4a37eb8

[props, inputRef as unknown] = useContextProps(props, inputRef, FieldInputContext);

https://github.com/adobe/react-spectrum/blame/4a37eb89b25b2cdde0fa44b2cb082b3bf2809ac2/packages/react-aria-components/src/TextField.tsx

🤔 Expected Behavior?

I would like a way to pass a prop (e.g., an event handler) directly to the input."

😯 Current Behavior

RAC 1.11.0 is OK. Since RAC 1.12.0 the TextField does not consume InputContext and seems not possible to pass onBeforeInput to the input element.

💁 Possible Solution

have both context InputContext and FieldInputContext ?

🔦 Context

No response

🖥️ Steps to Reproduce

RAC 1.12 contains

Version

RAC 1.12.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

The previous behavior of consuming from the Input context directly from within the TextField was a mistake on our part since the aim of that context was to receive props from a wrapping Autocomplete, but perhaps we could expand on the props the FieldInputContext/TextField accepts. For now could you not just pass said props/ref to the Input child directly?

[artola]

The previous behavior of consuming from the Input context directly from within the TextField was a mistake on our part since the aim of that context was to receive props from a wrapping Autocomplete, but perhaps we could expand on the props the FieldInputContext/TextField accepts. For now could you not just pass said props/ref to the Input child directly?

My composition looks like this:

<Provider values={[
  [InputContext, inputProps],
  // ... other providers
]}>
  <MyTextField />
</Provider>

Up to v1.11.0, it was possible to inject the input props through the context without touching MyTextField at all.

Replacing InputContext with FieldInputContext is not straightforward, because the props passed are merged into props and then into useTextField, which splits out the inputProps—almost everything I need in my case. However, it doesn’t handle some props, for example onPointerUp or onPointerDown.

The mentioned onPointerUp ends up in domProps and gets spread onto the root div.

I can work around this by rewriting the handler to check if the target is the input or not. But this becomes more of a philosophical issue: some handlers passed to FieldInputContext (like onPaste or onSelect) are applied to the input, while others (like onMouse... or onPointer...) do not end up on the input—although that’s probably what one would expect.