Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

ConsentPhoneField and ChoiceList acting weird

Solved

ConsentPhoneField and ChoiceList acting weird

Turbofan1178
Shopify Partner
57 4 10

I am working on a checkout ui extension but the ChoiceList and ConsentPhoneField components are acting weirdly.

 

When I am typing a number and right after the last number, the ChoiceList resets.

 

I'm not exactly sure what the issue is.

I've included a screencast of the bug.

Any help will be appreciated.

 

Here's the code snippet I'm working with:

 

function PhoneNumberField({ value, updateField, label }) {
  return (
    <ConsentPhoneField
      label={label}
      policy="sms-marketing"
      onChange={updateField}
      value={value}
    />
  );
}

function App() {
  const [option, setOption] = useState("");

  const handleChange = (value) => {
    setOption(value);
  };

  return (
    <BlockStack>
      <Text size="base">Label</Text>
      <ChoiceList
        name="choice"
        value="none"
        onChange={handleChange}
      >
        <InlineStack>
          <Choice id="none">None</Choice>
          <Choice id="a">A</Choice>
          <Choice id="b">B</Choice>
          <Choice id="c">C</Choice>
        </InlineStack>
      </ChoiceList>

      {option === "a" && (
        <PhoneNumberField 
          value={metafieldKey?.value}
          label="A"
          updatePhoneNumber={(value) => {
            applyMetafieldsChange({
              type: "updateMetafield", 
              namespace: metafieldNamespace, 
              key: metafieldKey, 
              valueType: "string", 
              value
            });
          }}
        />
      )}
     {option === "b" && (
        <PhoneNumberField 
          value={metafieldKey?.value}
          label="B"
          updatePhoneNumber={(value) => {
            applyMetafieldsChange({
              type: "updateMetafield", 
              namespace: metafieldNamespace, 
              key: metafieldKey, 
              valueType: "string", 
              value
            });
          }}
        />
      )}
}
Founder, WC: Invite To WhatsApp Channel
- Invite customers to join your WhatsApp channel with a single click
- Boost outreach message open rates
- Grow sales with direct outreach on WhatsApp channels
Accepted Solution (1)

Liam
Community Manager
3108 342 884

This is an accepted solution.

Hi Turbofan1178,

 

This does pretty weird - from checking the code snippet I did notice that in the ChoiceList component, the value is set to "none"- which might be resetting the value to none unintentionally. In our docs the value is set to "first" - could you try that?

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 2 (2)

Liam
Community Manager
3108 342 884

This is an accepted solution.

Hi Turbofan1178,

 

This does pretty weird - from checking the code snippet I did notice that in the ChoiceList component, the value is set to "none"- which might be resetting the value to none unintentionally. In our docs the value is set to "first" - could you try that?

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Turbofan1178
Shopify Partner
57 4 10

You're right. I must've missed that.

It is meant to be the value of the selected option that's in the state.

 

Let me try that now and see if that fixes it.

Founder, WC: Invite To WhatsApp Channel
- Invite customers to join your WhatsApp channel with a single click
- Boost outreach message open rates
- Grow sales with direct outreach on WhatsApp channels