Cannot use SUID (Material UI) components about modular-forms

[fabian-hiller]

Thank you for creating the issue. I remember testing SUID with Modular Forms a few months ago. At that time there were no problems. I will have a look at it and give you feedback by tomorrow.

[NightmanCZ90]

I will contant them and link this issue.

[fabian-hiller]

I don't know much about SUID or MUI component library, but took a look at the code on GitHub and suspect the following problem. The event listener that can be passed to the TextField component via the onInput prop is not added to the <input /> element but to an outer <div /> element. For this reason, the value can only be retrieved via event.target and not via event.currentTarget.

For Modular Forms it is important that the field.props are passed directly to the <input /> element, because this is relevant for several functionalities of the library. For example, focusing an element on invalid input.

I therefore see the problem on the side of SUID. I tried via inputProps and InputProps to pass the field.props directly to the <input /> element. Unfortunately without success. I recommend you to create an issue at SUID and exchange with @swordev. If needed, feel free to link me and this issue.

[fabian-hiller]

Is the problem still present? Should I create an issue at SUID?

[NightmanCZ90]

I haven't really contacted them. I checked their source code for inputs and from my understanding (although i could be wrong) it seems, they are merging those two event handlers (onChange and onInput) together.

I tested it and it seems that the only way I could work around it is to remap the field.props for TextField.
So far I have used this workaround below.

import { FieldElement } from "@modular-forms/solid";
import { JSX } from "solid-js";

export const remapFieldProps = (fieldProps: {
  name: string;
  ref: (element: FieldElement) => void;
  onInput: JSX.EventHandler<FieldElement, InputEvent>;
  onChange: JSX.EventHandler<FieldElement, Event>;
  onBlur: JSX.EventHandler<FieldElement, FocusEvent>;
}) => ({
  name: fieldProps.name,
  inputRef: fieldProps.ref,
  onBlur: fieldProps.onBlur,
  onChange: (e: any) => { fieldProps.onChange(e); fieldProps.onInput(e) }
});

=====================
<Field
  of={loginForm}
  name="email"
  validate={[
     required('Please enter your email.'),
     email('Please enter a valid email address.')
  ]}
>
  {(field) =>
    <TextField
      inputProps={{ ...remapFieldProps(field.props) }}
      type="email"
      value={field.value || ''}
      error={Boolean(field.error)}
      helperText={field.error}
    />}
</Field>

So far I haven't found any issue using this approach. But it may yet still come.

[fabian-hiller]

According to current knowledge, it looks like it is a "problem" with the naming on the part of SUID. Here is a workaround.