[react-form] Use of useChoiceField results in Cannot read property 'dirty' of undefined

[chaddjohnson]

Please note I do not have the ability to assign the "bug" label to this issue.

Overview

When using useChoiceField, I get an error, Cannot read property 'dirty' of undefined. Here is a code snippet:

import { useForm, useField, useChoiceField, notEmpty } from '@shopify/react-form';

const [product, setProduct] = useState(props.product);

const { fields, submit, submitting, dirty, reset } = useForm({
  fields: {
    name: useField({
      value: product.name,
      validates: [notEmpty("Name can't be blank")]
    }),
    showNotification: useChoiceField({
      value: product.showNotification,
      validates: []
    })
  },
  onSubmit: async form => {
    // ...
  }
});

I also tried

useChoiceField(product.showNotification);

The error definitely occurs when using useChoiceField.

Here is my checkbox (the error occurs whether or not this checkbox is in place):

<Checkbox label={`Show notification`} {...fields.showNotification} />

Consuming repo

What repo were you working in when this issue occurred?

Building my own app using Shopify Polaris.

[chaddjohnson]

@patsissons @TheMallen @michaelmelanson Any chance we can get this looked at? useChoiceField is broken.

[chaddjohnson]

Actually, it appears that the following works:

showNotification: useField(useChoiceField(product.showNotificationBanner)),

If this is the correct way to utilize useChoiceField, it might make sense to update the documentation to reflect this.

[michaelmelanson]

Thanks for the bug report! I think it was my change in #1296 that caused this, so I'll look into it for you. Sorry for the trouble.

In the meantime I suggest going back to version 0.3.34 of react-form until this is resolved.

[chaddjohnson]

Thanks @michaelmelanson!

Also, I might have jumped the gun. When using

showNotification: useField(useChoiceField(product.showNotificationBanner)),

I am seeing the following for checkbox item values (instead of true/false) in formValues in the onSubmit handler passed to useForm():

[chaddjohnson]

@michaelmelanson Any news on this? Having this fixed would make react-form more usable.

[michaelmelanson]

Sorry for the delay here. I meant to get to this sooner, but with everything else going on I haven’t yet.

It’s still on my radar, so I’ll get to it as soon as I can.

[chaddjohnson]

I found a workable solution.

For Checkbox fields, I'm using useField and asChoiceField:

const showNotifications = useField(props.product.showNotifications);

// ...

<Checkbox label="Show notifications" {...asChoiceField(showNotifications)} />

This works great. However, useChoiceField does not work:

const showNotifications = useChoiceField(props.product.showNotifications);

// ...

<Checkbox label="Show notifications" {...showNotifications} />

This results in Uncaught TypeError: Cannot convert undefined or null to object.

For ChoiceList fields, I am using useField:

const notificationOptions = useField(props.product.notificationOptions);

// ...

<ChoiceList
  choices={[
    {
      label: 'Always',
      value: 'ALWAYS'
    },
    {
      label: 'Never',
      value: 'NEVER'
    }
  ]}
  selected={notificationOptions.value}
  onChange={([value]) => notificationOptions.onChange(value)}
/>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[avocadoslab]

@chaddjohnson that exactly solved my issue! Thanks a ton.