AutoComplete Popup Won't Disappear on Selection When Inside a Sheet

Highlighted
Pathfinder
83 4 11

Inside a Sheet, my AutoComplete is not working correctly. The items that popup won't disappear when I select an item. See below:

sheet-autocomplete-error.gif

 

 

 

 

 

 

 

 

The above example is located in the following codesandbox: https://klek1.csb.app/ 

Here is my AutoComplete function: 

 

function AutocompleteExample() {
  const [selectedIndustryOptions, setSelectedIndustryOptions] = useState([]);
  const [selectedCategoryOptions, setSelectedCategoryOptions] = useState([]);
  const [selectedItemOptions, setSelectedItemOptions] = useState([]);
  const [inputIndustryValue, setInputIndustryValue] = useState("");
  const [inputCategoryValue, setInputCategoryValue] = useState("");
  const [inputItemValue, setInputItemValue] = useState("");
  const [industryOptions, setIndustryOptions] = useState(industries);
  const [categoryOptions, setCategoryOptions] = useState(categories);
  const [itemOptions, setItemOptions] = useState(items);

  const updateIndustry = useCallback(
    value => {
      setInputIndustryValue(value);
      if (value === "") {
        setIndustryOptions(industries);
        return;
      }

      const filterRegex = new RegExp(value, "i");
      const resultOptions = industries.filter(option =>
        option.label.match(filterRegex)
      );
      setIndustryOptions(resultOptions);
    },
    [industries]
  );

  const updateCategory = useCallback(
    value => {
      setInputCategoryValue(value);
      if (value === "") {
        setCategoryOptions(categories);
        return;
      }

      const filterRegex = new RegExp(value, "i");
      const resultOptions = categories.filter(option =>
        option.label.match(filterRegex)
      );
      setCategoryOptions(resultOptions);
    },
    [categories]
  );

  const updateItem = useCallback(
    value => {
      setInputItemValue(value);
      if (value === "") {
        setItemOptions(items);
        return;
      }

      const filterRegex = new RegExp(value, "i");
      const resultOptions = categories.filter(option =>
        option.label.match(filterRegex)
      );
      setItemOptions(resultOptions);
    },
    [items]
  );

  const updateIndustrySelection = useCallback(selected => {
    const selectedValue = selected.map(selectedItem => {
      const matchedOption = industryOptions.find(option => {
        return option.value.match(selectedItem);
      });
      console.log("Selected: " + matchedOption.label);

      //FILTER CATEGORY RESULTS HERE:
      const resultOptions = categories.filter(option =>
        option.industry.match(selectedItem)
      );
      setCategoryOptions(resultOptions);

      //FILTER ITEMS HERE:
      const resultOptions2 = items.filter(option =>
        option.industry.match(selectedItem)
      );
      setItemOptions(resultOptions2);

      return matchedOption && matchedOption.label;
    });

    setSelectedIndustryOptions(selected);
    setInputIndustryValue(selectedValue);
  }, []);

  const updateCategorySelection = useCallback(selected => {
    const selectedValue = selected.map(selectedItem => {
      const matchedOption = categoryOptions.find(option => {
        return option.value.match(selectedItem);
      });
      console.log("Selected: " + matchedOption.label);
      //FILTER ITEMS HERE:
      const resultOptions = items.filter(option =>
        option.category.match(selectedItem)
      );
      setItemOptions(resultOptions);

      return matchedOption && matchedOption.label;
    });

    setSelectedCategoryOptions(selected);
    setInputCategoryValue(selectedValue);
  }, []);

  const updateItemSelection = useCallback(selected => {
    const selectedValue = selected.map(selectedItem => {
      const matchedOption = itemOptions.find(option => {
        return option.value.match(selectedItem);
      });
      console.log("Selected: " + matchedOption.label);
      //
      return matchedOption && matchedOption.label;
    });

    setSelectedItemOptions(selected);
    setInputItemValue(selectedValue);
  }, []);

  const industryField = (
    <Autocomplete.TextField
      onChange={updateIndustry}
      label="Industry"
      value={inputIndustryValue}
      placeholder={selectedIndustryOptions}
    />
  );
  const categoryField = (
    <Autocomplete.TextField
      onChange={updateCategory}
      label="Category"
      value={inputCategoryValue}
      placeholder={selectedCategoryOptions}
    />
  );
  const itemField = (
    <Autocomplete.TextField
      onChange={updateItem}
      label="Select Item"
      value={inputItemValue}
      placeholder={selectedItemOptions}
    />
  );

  return (
    <div style={{ height: "225px" }}>
      <Form>
        <FormLayout>
          <FormLayout.Group>
            <Autocomplete
              options={industryOptions}
              selected={selectedIndustryOptions}
              onSelect={updateIndustrySelection}
              textField={industryField}
            />

            <Autocomplete
              options={categoryOptions}
              selected={selectedCategoryOptions}
              onSelect={updateCategorySelection}
              textField={categoryField}
            />
          </FormLayout.Group>
          <FormLayout.Group>
            <Autocomplete
              options={itemOptions}
              selected={selectedItemOptions}
              onSelect={updateItemSelection}
              textField={itemField}
            />
          </FormLayout.Group>
          <Button submit>Save Tax Code</Button>
        </FormLayout>
      </Form>
    </div>
  );
}

 

Highlighted
Excursionist
13 1 2

Can confirm this is happening to us as well, and would be great if this bug could be fixed.

Highlighted
Pathfinder
83 4 11

I logged this as a bug on the Polaris GitHub site: https://github.com/Shopify/polaris-react/issues/3146