Autocomplete example in README.md gives error

[snnsnn]

Describe the bug
The example in https://github.com/WordPress/gutenberg/blob/master/packages/components/src/autocomplete/README.md gives error:

To reproduce
Steps to reproduce the behavior:
Here is the block that I use:

import { RichText } from '@wordpress/block-editor';
import { registerBlockType } from '@wordpress/blocks';
import { Autocomplete } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import * as React from 'react';

const BLOCK_NAME = 'custom/checker';

const MyAutocomplete = (content, setContent) => {
  const autocompleters = [
    {
      name: 'fruit',
      // The prefix that triggers this completer
      triggerPrefix: '~',
      // The option data
      options: [
        { visual: '🍎', name: 'Apple', id: 1 },
        { visual: '🍊', name: 'Orange', id: 2 },
        { visual: '🍇', name: 'Grapes', id: 3 },
      ],
      // Returns a label for an option like "🍊 Orange"
      getOptionLabel: option => (
        <span>
          <span className="icon">{option.visual}</span>
          {option.name}
        </span>
      ),
      // Declares that options should be matched by their name
      getOptionKeywords: option => [option.name],
      // Declares that the Grapes option is disabled
      isOptionDisabled: option => option.name === 'Grapes',
      // Declares completions should be inserted as abbreviations
      getOptionCompletion: option => (
        <abbr title={option.name}>{option.visual}</abbr>
      ),
    },
  ];

  return (
    <div>
      <Autocomplete completers={autocompleters}>
        {({ isExpanded, listBoxId, activeId }) => (
          <div
            contentEditable
            suppressContentEditableWarning
            aria-autocomplete="list"
            aria-expanded={isExpanded}
            aria-owns={listBoxId}
            aria-activedescendant={activeId}
          />
        )}
      </Autocomplete>
      <RichText
        identifier="content"
        tagName="h3"
        value={content}
        onChange={setContent}
        placeholder={__('Add title', 'custom')}
      />
    </div>
  );
};

registerBlockType(BLOCK_NAME, {
  title: __('Checker', 'custom'),

  description: __('Checker', 'custom'),

  category: 'common',

  keywords: [
    __('Checker', 'custom'),
    __('Block', 'custom'),
  ],

  icon: 'carrot',

  supports: {
    className: true,
    customClassName: false,
    align: false,
  },

  attributes: {
    content: {
      type: 'string',
      default: 'Apple',
    },
  },

  edit({ attributes, setAttributes }) {
    const { content } = attributes;

    const setContent = (value) => {
      setAttributes({ title: value });
    };

    return (
      <React.Fragment>
        <MyAutocomplete content={content} setContent={setContent} />
      </React.Fragment>
    );
  },

  save() {
    return <div>Checker Save</div>;
  },
});

It renders the block without a problem but once I clicked the "Ad title" placeholder to add title it gives following error:

TypeError: Cannot read property 'start' of undefined
    at V (index.js?ver=1563103569:12)
    at t.value (index.js?ver=1563103570:19)
    at qi (react-dom.min.fa9ca8c8.js:130)
    at ui (react-dom.min.fa9ca8c8.js:133)
    at react-dom.min.fa9ca8c8.js:158
    at unstable_runWithPriority (react.min.f4c1469c.js:27)
    at Vc (react-dom.min.fa9ca8c8.js:158)
    at Sc (react-dom.min.fa9ca8c8.js:158)
    at Z (react-dom.min.fa9ca8c8.js:156)
    at Kc (react-dom.min.fa9ca8c8.js:155)
Bg @ react-dom.min.fa9ca8c8.js:117
Ig.f.componentDidCatch.c.callback @ react-dom.min.fa9ca8c8.js:126
Ag @ react-dom.min.fa9ca8c8.js:116
zg @ react-dom.min.fa9ca8c8.js:116
qi @ react-dom.min.fa9ca8c8.js:130
ui @ react-dom.min.fa9ca8c8.js:133
(anonymous) @ react-dom.min.fa9ca8c8.js:158
unstable_runWithPriority @ react.min.f4c1469c.js:27
Vc @ react-dom.min.fa9ca8c8.js:158
Sc @ react-dom.min.fa9ca8c8.js:158
Z @ react-dom.min.fa9ca8c8.js:156
Kc @ react-dom.min.fa9ca8c8.js:155
ya @ react-dom.min.fa9ca8c8.js:153
enqueueSetState @ react-dom.min.fa9ca8c8.js:202
t.setState @ react.min.f4c1469c.js:20
value @ index.js?ver=1563103570:19
value @ index.js?ver=1563103570:19
(anonymous) @ index.js?ver=1563103570:19
setTimeout (async)
value @ index.js?ver=1563103570:19
sh @ react-dom.min.fa9ca8c8.js:164
rh @ react-dom.min.fa9ca8c8.js:13
uh @ react-dom.min.fa9ca8c8.js:13
Ge @ react-dom.min.fa9ca8c8.js:15
vh @ react-dom.min.fa9ca8c8.js:165
ad @ react-dom.min.fa9ca8c8.js:15
cd @ react-dom.min.fa9ca8c8.js:17
Uh @ react-dom.min.fa9ca8c8.js:39
Zg @ react-dom.min.fa9ca8c8.js:158
Xe @ react-dom.min.fa9ca8c8.js:23
oc @ react-dom.min.fa9ca8c8.js:40
(anonymous) @ react-dom.min.fa9ca8c8.js:159
unstable_runWithPriority @ react.min.f4c1469c.js:27
ah @ react-dom.min.fa9ca8c8.js:159
xf @ react-dom.min.fa9ca8c8.js:40

Block works completely as expected with RichText only and without MyAutocomplete component.

[nreynis]

Also not working for me using WP 5.1, the error I got is _ref is undefined

[borgogelli]

+1 same problem for me

[JordanPak]

I think I found a decent workaround by filtering what's already integrated with the RichText field, at least until this is resolved: #10542 / comment

[chad1008]

Hey everyone! Thanks for reporting this. Potential update to the Autocomplete README is in the works in #49965.

TL;DR - Autocomplete is integrated with other packages/components in a way that don't make it the best fit for standalone usage. Instead, it is possible to filter the editor's available completers, much like @JordanPak describes above. And example is being added to the README in the pending PR.