[Autocomplete] useLayoutEffect in combobox

[dfmcphee]

WHY are these changes introduced?

This fixes #3048.

Before this change

After this change

WHAT is this pull request doing?

It updates the effect used in the Combobox component to useLayoutEffect instead of useEffect. This makes sure the changes are committed before the browser paint cycle. This resolves the issue we were seeing in the autocomplete because it makes sure that change is updated before the popover tries to calculate the height to display itself.

How to 🎩

Copy-paste this code in playground/Playground.tsx:

import React, {useCallback, useState, useMemo} from 'react';
import {SearchMinor} from '@shopify/polaris-icons';

import {Icon, Autocomplete, TextContainer} from '../src';

export function Playground() {
  const deselectedOptions = useMemo(
    () => [
      {value: 'rustic', label: 'Rustic'},
      {value: 'antique', label: 'Antique'},
      {value: 'vinyl', label: 'Vinyl'},
      {value: 'vintage', label: 'Vintage'},
      {value: 'refurbished', label: 'Refurbished'},
    ],
    [],
  );
  const [selectedOptions, setSelectedOptions] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState(deselectedOptions);
  const [loading, setLoading] = useState(false);

  const updateText = useCallback(
    (value) => {
      setInputValue(value);

      if (!loading) {
        setLoading(true);
      }

      setTimeout(() => {
        if (value === '') {
          setOptions(deselectedOptions);
          setLoading(false);
          return;
        }
        const filterRegex = new RegExp(value, 'i');
        const resultOptions = options.filter((option) =>
          option.label.match(filterRegex),
        );
        setOptions(resultOptions);
        setLoading(false);
      }, 300);
    },
    [deselectedOptions, loading, options],
  );

  const updateSelection = useCallback(
    (selected) => {
      const selectedText = selected.map((selectedItem) => {
        const matchedOption = options.find((option) => {
          return option.value.match(selectedItem);
        });
        return matchedOption && matchedOption.label;
      });
      setSelectedOptions(selected);
      setInputValue(selectedText);
    },
    [options],
  );

  const textField = (
    <Autocomplete.TextField
      onChange={updateText}
      label="Tags"
      value={inputValue}
      prefix={<Icon source={SearchMinor} color="subdued" />}
      placeholder="Search"
    />
  );

  const emptyState = (
    <>
      <Icon source={SearchMinor} />
      <div style={{textAlign: 'center'}}>
        <TextContainer>Could not find any results</TextContainer>
      </div>
    </>
  );

  return (
    <div style={{height: '225px'}}>
      <Autocomplete
        options={options}
        selected={selectedOptions}
        onSelect={updateSelection}
        loading={loading}
        textField={textField}
        emptyState={emptyState}
      />
    </div>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[github-actions]

🟢 This pull request modifies 2 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/Autocomplete/Autocomplete.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Autocomplete/components/ComboBox/ComboBox.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/Autocomplete/Autocomplete.tsx

[kyledurand]

Nice, easy fix for a fairly ugly bug

[BPScott]

I seem to recall useLayoutEffect causes issues with server side rendering do we need to do something to make that play nice?