ConsentPhoneField and ChoiceList acting weird

[Turbofan1178]

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
            });
          }}
        />
      )}
}

[Liam · 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!

[Turbofan1178]

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.