Custom input - field values not sent in payload

[fullyherge]

I'm trying to override most things in Ory Elements, but I am struggling with the Input component. The values are not being sent in the payload, and I don't see why this is. I thought it may be due to them not being registered in react-hook-forms state, but I can't do anything about this as I cannot access the context to register them myself.

What is the intended way of overriding these form node components?

Here's some code, for context:

// login/page.tsx
export default async function LoginPage(props: OryPageParams) {
  const flow = await getLoginFlow(config, props.searchParams);

  if (!flow) {
    return null;
  }

  return <Login flow={flow} config={config} components={overrides} />;
}

// overrides.tsx
export const overrides: OryFlowComponentOverrides = {
  Node: {
    Input: (props) => {
      const { name, type } = props.attributes;

      return (
        <Input
          id={name}
          name={name}
          onClick={props.onClick}
          // Set identifier field to be email type
          type={
            props.attributes.name === "identifier"
              ? "email"
              : props.attributes.type
          }
          // Only add value if it exists to prevent browser errors
          {...(props.attributes.value ? { value: props.attributes.value } : {})}
          // Change casing of autocomplete to make React happy
          autoComplete={props.attributes.autocomplete}
          // Read Only for hidden fields to prevent browser errors
          readOnly={props.attributes.type === "hidden"}
        />
      );
    },

The rendered <input> looks like this:

// with or without `id` makes no difference, added it to silence 
<input type="email" data-slot="input" class="..." id="identifier" name="identifier">

In comparison to when not overriding the input:

<input required="" placeholder="Enter your E-Mail" data-testid="ory/form/node/input/identifier" class="..." type="text" name="identifier">

[fullyherge]

Just stumbled upon this thread on the Slack:

Hello, is there any example on how to override the input component in Ory Elements?

Hi, no not yet. We have a few updates to the documentation planned in the coming weeks, keep an eye on https://changelog.ory.sh/ for updates regarding that.

[vinckr]

Hello @fullyherge

Looks like there’s a bug in Ory Elements - should get this fixed soon.
Can't provide a timeline for it yet.
@jonas-jonas should we turn this into an issue to track it?

[fullyherge]

@vinckr any update on this?

[vinckr]

hey, not yet. It should be fixed by the next release 1.2.0 - afaik there are still some smaller things to resolve, but should be released soon