theme-product-form doesn't work with some third party apps

[thebiggianthead]

In the theme-product-form _onSubmit function, there is a call to the _setIdInputValue function:

this._setIdInputValue(event.dataset.variant.id);

This finds the input with the name="id" and changes the value to the selected variant ID. For some third parties, eg. Recharge, this is incompatible with how they work (in the case of Recharge, the default input is replaced with an alternative to add a different product to cart). This means the replacement input is incorrectly assigned a value which doesn't exist, resulting in an add to cart error.

It seems to me that re-setting the value of this input here is quite opinionated and doesn't allow for some adjustments to behaviour that might be quite legitimate.

[savchukoleksii]

@t-kelly @statementtom ReCharge add custom select and remove name="id" from original select to own one. When _setIdInputValue try to set variant value to new element variant value does not exist in ReCharge select, so value sets to "". Possible solution to allow users to use custom selectors: https://github.com/savchukoleksii/theme-scripts/blob/theme-product-form/selectors-option/packages/theme-product-form/theme-product-form.js#L52. On the other side, many apps depends on id input and add custom event listeners to id select. ReCharge is one of them. You can explore more about this problem here: https://github.com/Shopify/theme-scripts/issues/146#issuecomment-767773548