fix(components): Prevent invalid label from causing infinite loop with Autocomplete

[jdeichert]

Motivations

This PR introduces an extra safety check for the Autocomplete v2 value prop.

There's a case in consumer code where they supplied an empty label (equivalent to this value={{ label: "" }}) instead of supplying undefined when nothing is selected. This empty label can lead to an infinite loop due to value being non-null, useAutocomplete was treating that as hasSelection=true which then led to an effect running unnecessarily, to clear the value with onChange(undefined). The consumer code then did the exact same thing in response to that onChange call, supplying an empty label, thus causing the loop.

This is now fixed by treating an empty/nullish value.label as an invalid value, making it match the unselected case just like if value was undefined. This prevents consumer code from accidentally triggering this code path leading to an infinite loop.

Ideally consumers don't supply invalid labels. However, it's possibly due to the fact that ReactHookForm does not allow passing undefined to the controller, so consumers are working around that in their own ways. Regardless, adding this precaution is a pretty cheap and effective way to avoid potential infinite loops that end up coming back to us for investigation.

Changes

Fixed

• Prevent infinite loops when receiving an invalid value.label

Testing

1. Pull this branch locally
2. Open up the story: docs/components/Autocomplete/WebV2.stories.tsx
3. Update TemplateFlat to the code example below
4. View this story locally
   • Observe there's no infinite loop
5. Repeat with this test story against master and you'll see an infinite loop

const TemplateFlat: ComponentStory<typeof Autocomplete> = () => {
  const [{ value }, setFormValue] = useState<{ value: string }>({ value: "" });
  const [inputValue, setInputValue] = useState("");

  console.log(`🔥 rerender`);

  return (
    <Content>
      <Heading level={4}>Flat, default layout</Heading>
      <Autocomplete
        version={2}
        placeholder="Search for a service"
        value={{ label: value, value }}
        onChange={v => {
          if (v) {
            setFormValue({ value: v.label });
          } else {
            setFormValue({ value: "" });
          }
        }}
        inputValue={inputValue}
        onInputChange={setInputValue}
        menu={[{ type: "options", options: flatOptions }]}
      />
    </Content>
  );
};

Changes can be tested via Pre-release

---

In Atlantis we use Github's built in pull request reviews.

[jdeichert]

This test was added before the fix, and was failing as expected. Now passing 👍

[cloudflare-workers-and-pages]

Deploying atlantis with    Cloudflare Pages

Latest commit:	8e8da81
Status:	✅  Deploy successful!
Preview URL:	https://738c45df.atlantis.pages.dev
Branch Preview URL:	https://job-148590-prevent-potential.atlantis.pages.dev

View logs

[ZakaryH]

LGTM

while I would prefer consumers not provide values such as an empty label string, I understand RHF and default, empty states can complicate that.