What framework are you using? Can you share the code for your current implementation?

Using SolidJS. I'm just starting so I have no substantial code to share at this point. ( just experimental code with pieces that have been deleted/removed as I test things out )

UPDATE: To keep my question as simple as possible, is there a way to programatically trigger the onChange of the Field component to pass a new input value? I think that would help me solve my original question. ( moving the updating of the input.value to inside of my component since I'm using a hidden input to store my custom element's value )

You can use our setValue method instead: https://modularforms.dev/solid/api/setValue

Ok thanks. I'm using setValue now but how do I call it from inside of my custom component? It would be cleaner for me to use setValue in my component instead of adding an onChange attribute to it. My component is a child of and from what I can see, the props.onChange usually gets called from inside my component.

I do not recommend calling it from inside. Instead, pass a function that calls setValue to your custom component:

<Component onChange={(value) => setValue(formStore, 'name', value)} />

Ok thanks. Maybe there could be a new event hook for manual updates instead of relaying solely on the props.onChange? In my case, my component calculates a new input value and stores it in a hidden input. The hidden input never has its onChange event triggered, so it would be nice to call onSetValue or something.

Thanks!

Isn't the onChange from my last comment what you need? Otherwise you could also update the hidden input via an event to automatically trigger our normal props.onInput function.

The onChange needs to be called from outside of the element. It's ok and works but it would be better to have that encapsulated into the component. From what I understand the onChange event of an input field does not get triggered, only onInput....

The onChange needs to be called from outside of the element. It's ok and works but it would be better to have that encapsulated into the component.

I'm not sure what you mean. Can you explain it with a code example?

From what I understand the onChange event of an input field does not get triggered, only onInput....

Yes, my mistake. I meant props.onInput. I updated my comment.

For example, if a custom component does not use an input tag of any type, how would that component trigger the Field props.onChange/props.onInput events? It currently would require the custom component generate a 'fake' onChange event to trigger the Field event to update the value, even though there would be no Input/Select tag inside the custom component. I thought onInput would be triggered on the hidden input field, and that Field would update the value on those events but it did not work when I tried that.

Progressively enhanced forms and forms with file uploads make it necessary to capture all input with a HTML form field like <input /> and <select />. Otherwise, the form input can't be successfully submitted to the server in these cases by default. My goal for Modular Forms is to be as close as possible to what's already possible in the browser to support all these cases. Unfortunately, this makes more complex cases more complicated.

I'd recommend connecting Modular Forms' props to your hidden <input /> element and updating its value via a custom input event. This way Modular Forms should automatically capture any changes. I would be happy to work this out with you to improve the DX for all developers in the long run.

Ok great. I would agree using a hidden element makes sense. What would the custom event look like? The Field props.onInput and onChange listeners expect a specific type of event. ( I would like avoid Typescript type errors ) My custom component would update the hidden input's value programatically and dispatch an onChange event for Field to handle accordingly, but what would that event look like?

Try to call element.dispatchEvent(new Event('input')) after updating its input.

That works well for me, problem solved. Note I had to use:
new Event('input', {bubbles:true, composed:true})

Thanks for the info. I will add a guide for such cases in the long run.