search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.43k stars 4.17k forks source link

Autocomplete example in README.md gives error #33852

Closed jtrost closed 10 months ago

jtrost commented 3 years ago

Is there an existing issue for this?

Have you tried deactivating all plugins except Gutenberg?

Have you tried replicating the bug using a default theme e.g. Twenty Twenty?

Description

The code in the Usage section of the Autocomplete component raises TypeError: e is undefined.

Here are all of the Wordpress packages I am using:

{
    "@wordpress/api-fetch": "^4.0.0",
    "@wordpress/block-editor": "^5.2.2",
    "@wordpress/block-library": "^3.2.8",
    "@wordpress/blocks": "^6.25.2",
    "@wordpress/data": "^4.27.3",
    "@wordpress/i18n": "^3.17.0"
  }

Step-by-step reproduction instructions

Paste the code snippet below into any block.

Expected Behavior

An autocomplete field appears and is usable.

Current Behavior

 TypeError: e is undefined
    $ http://localhost:10008/wp-includes/js/dist/rich-text.min.js?ver=dc66b38a90bdf10456e113646934eb2f:2
    e http://localhost:10008/wp-includes/js/dist/components.min.js?ver=05cdf30cf2623cd4539a5c19832b0114:7
    we http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:84
    zj http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:226
    Th http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:152
    tj http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:152
    Te http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:146
    Pg http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:61
    unstable_runWithPriority http://localhost:10008/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:25
    Da http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60
react-dom.min.js:125:24
    Me http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:125
    callback http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:139
    Wg http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:67
    oj http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:127
    Aj http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:160
    unstable_runWithPriority http://localhost:10008/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:25
    Da http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60
    ab http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:154
    Te http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:146
    Pg http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:61
    unstable_runWithPriority http://localhost:10008/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:25
    Da http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60
    Pg http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:61
    ha http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60
    Ja http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:224
    ch http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:93
    e http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    t http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    w http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    p http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    e http://localhost:10008/wp-admin/post.php?post=2&action=edit:1
    s Redux
    M http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    U http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    dispatch http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    Redux 41
    M http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    U http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    d http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    Gc http://localhost:10008/wp-includes/js/dist/editor.min.js?ver=dbf1015c024ecc3b432a2a5d7898e51d:12
    Bh http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:126
    oj http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:126
    Aj http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:160
    unstable_runWithPriority http://localhost:10008/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:25
    Da http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60
    ab http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:154
    Te http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:146
    Pg http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:61
    unstable_runWithPriority http://localhost:10008/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:25
    Da http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60
    Pg http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:61
    ha http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60
    Ja http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:224
    ch http://localhost:10008/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:93
    e http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    t http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    w http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    p http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    e http://localhost:10008/wp-admin/post.php?post=2&action=edit:1
    s Redux
    M http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    U http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2
    dispatch http://localhost:10008/wp-includes/js/dist/data.min.js?ver=943087ae96d075f126df689839bb96b9:2

Screenshots or screen recording (optional)

No response

Code snippet (optional)

      <Autocomplete completers={[
        {
            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>
            ),
        }
    ]}>
                { ( { isExpanded, listBoxId, activeId } ) => (
                    <div
                        contentEditable
                        suppressContentEditableWarning
                        aria-autocomplete="list"
                        aria-expanded={ isExpanded }
                        aria-owns={ listBoxId }
                        aria-activedescendant={ activeId }
                    >
                    </div>
                ) }
            </Autocomplete>

WordPress Information

Version | 5.7.2 (Latest version: 5.8)
Site Language | en_US
User Language | en_US
Timezone | +00:00
Home URL | http://localhost:10008
Site URL | http://localhost:10008
Permalink structure | /%postname%/
Is this site using HTTPS? | No
Is this a multisite? | No
Can anyone register on this site? | No
Is this site discouraging search engines? | No
Default comment status | Open
Environment type | local
User count | 4
Communication with WordPress.org | WordPress.org is reachable

Gutenberg Information

9.9

What browsers are you seeing the problem on?

Firefox, Chrome

Device Information

Desktop

Operating System Information

OS X 10.14.6

johngodley commented 3 years ago

Confirmed. The component seems to be expecting a record, which I think is a text selection start/end, and as such is closely coupled with the RichText component.

I don't know if the intention is that it should be used in conjunction with useRichText, and as such the documentation needs updating, or that is can be used on its own and the component needs updating.

johngodley commented 3 years ago

Noting that the error is in this code:

    if ( isCollapsed( record ) ) {
        textContent = getTextContent( slice( record, 0 ) );
    }

Where record is undefined. The record value comes from the unstable component useRichText.

skorasaurus commented 3 years ago

related: https://github.com/WordPress/gutenberg/issues/16624

chad1008 commented 1 year ago

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.

JordanPak commented 1 year ago

Thanks for the clarification @chad1008

In case anyone is looking for a direct link to his reference, here it is. 😄

chad1008 commented 1 year ago

🤦 ...and thank you for saving us all from my copy/paste failure 😆

skorasaurus commented 10 months ago

fixed in https://github.com/WordPress/gutenberg/pull/49965