[ComboBox] Use isomorphic layout effect

[dfmcphee]

WHY are these changes introduced?

As @BPScott pointed out in #4015 (comment) useLayoutEffect will throw a warning during SSR.

WHAT is this pull request doing?

This follows the suggestions in this issue conditionally using useEffect instead on the server.

How to 🎩

Try this in the playground:

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

[alex-page]

Nice, didn't tophat but this makes sense.

[github-actions]

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

Details:

All files potentially affected (total: 1)

• /src/components/Autocomplete/Autocomplete.tsx

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

Files potentially affected (total: 1)

• /src/components/Autocomplete/Autocomplete.tsx