Solved

ConsentPhoneField and ChoiceList acting weird

Turbofan1178
Shopify Partner
47 4 5

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
            });
          }}
        />
      )}
}
Accepted Solution (1)

Liam
Shopify Staff
2689 289 738

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
Shopify Staff
2689 289 738

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
47 4 5

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.