Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0.0] javascript error using AutoComplete component #10542

Open
manooweb opened this Issue Oct 12, 2018 · 17 comments

Comments

Projects
None yet
10 participants
@manooweb
Copy link
Contributor

manooweb commented Oct 12, 2018

Describe the bug
The AutoComplete component example documented here https://github.com/WordPress/gutenberg/tree/master/packages/components/src/autocomplete

works fine with Gutenberg 3.9.0 but with Gutenberg 4.0.0-rc.1 a javascript errors occurs and no component is displayed.

To Reproduce
Steps to reproduce the behavior:

  1. Code a component exactly like the documented example
  2. Run it in the Gutenberg context
  3. See Gutenberg Error on screen
  4. See javascript Error in the console of the developer tools bar

Expected behavior
A simple AutoComplete component has to work fine with Gutenberg 4.0.0-rc.1

Screenshots
image

Desktop (please complete the following information):

  • OS: windows 10
  • Browser chrome 69
  • Version [e.g. 22]
@manooweb

This comment has been minimized.

Copy link
Contributor Author

manooweb commented Oct 12, 2018

AutoComplete componentDidUpdate() seems to be rewritten and need a record property to pass it to the isCollapsed function of the RichText Component.
In a case where we don't use the AutoComplete component with RichText the property record is undefined and isCollapsed() function causes the error.

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Oct 12, 2018

Does this ring any bells for you @iseulde?

@ellatrix

This comment has been minimized.

Copy link
Member

ellatrix commented Oct 12, 2018

Looking

@ellatrix

This comment has been minimized.

Copy link
Member

ellatrix commented Oct 12, 2018

Unsure how we can make it work again with a plain contenteditable field without introducing a lot of code. @manooweb How are you using the AutoComplete component? In combination with RichText or something else? How are you using it inside a block?

@ellatrix ellatrix added the [Type] Bug label Oct 12, 2018

@manooweb

This comment has been minimized.

Copy link
Contributor Author

manooweb commented Oct 12, 2018

@iseulde no I am inside a plugin sidebar and I just put the code exactly like it is documented in the readme file I linked above.

Screenshot with Gutenberg 3.9.0

image

Autocomplete component is wrapped in a span tag in our jsx render code of our parent component. This is not a pure function component but a class component with state. I initialize completers inside the constructor and pass this property to Autocomplete with this.completers.
This just the little things that are different with the code example in the documentation.

This is really the component which is inside @wordpress/components and not the other one which is inside the editor package and which is a wrapper.

@manooweb

This comment has been minimized.

Copy link
Contributor Author

manooweb commented Oct 17, 2018

So, I continue to develop my component with the Autocomplete of Gutenberg 3.9.0 with a simple contentEditable and it works fine. I coded a promise with apiFetch() call to get posts filtered by language to initialize the options of the Autocomplete component.
When I switch to Gutenberg 4.0.0-rc.1, it is broken for the same reason that I opened the issue.

Then, I'm trying to integrate Autocomplete 3.9.0 in our code but now I have a lodash error which seems to be triggered by the "compose" fonction of Autocomplete component

image

Any kind of help or guidance will be appreciate to continue in the right direction to finish this feature.

Thank you so much

@manooweb

This comment has been minimized.

Copy link
Contributor Author

manooweb commented Oct 18, 2018

Well, it's ok for me now. I solved my last problem. I just did a mistake with import syntax that I have to change for putting the component outside Gutenberg.
So I integrated directly in our code the Autocomplete component from Gutenberg 3.9.0
The first issue is always there if you want to use the component as it is explained in its documentation.

I'd prefer that the the Autocomplete component stay in Gutenberg to maintain it and continue to work fine with contentEditable as in Gutenberg 3.9.0.

@manooweb manooweb changed the title [4.0.0-rc.1] javascript error using AutoComplete component [4.0.0] javascript error using AutoComplete component Oct 19, 2018

@petenelson

This comment has been minimized.

Copy link

petenelson commented Oct 24, 2018

Just updated to 4.1 and it's still occurring.

@manooweb

This comment has been minimized.

Copy link
Contributor Author

manooweb commented Oct 24, 2018

Thanks @petenelson :-)
I dived deeper in code and understood I have to use RichText component which is using Autocomplete component but I did not find yet how to do it properly.

@leogermani

This comment has been minimized.

Copy link

leogermani commented Nov 6, 2018

Hi @iseulde ,

Any chances this component is fixed to the release? Is this been worked on?

Thanks!

@petenelson

This comment has been minimized.

Copy link

petenelson commented Nov 14, 2018

Still an issue as of 4.3

@thatdevgirl

This comment has been minimized.

Copy link

thatdevgirl commented Nov 28, 2018

I am also seeing this issue in 4.5.1.

@thatdevgirl

This comment has been minimized.

Copy link

thatdevgirl commented Nov 29, 2018

Hopefully this is helpful. I really needed an Autocomplete component for the project I am working on right now, so I created a super simple one. https://gist.github.com/thatdevgirl/e20f72d5b985c6eab441bdf491b3edf0

@igorbenic

This comment has been minimized.

Copy link

igorbenic commented Dec 5, 2018

If you add record={{}} to the Autocomplete component it should work but I am not sure how and when should this record be updated. It receives start, end, format and text values but I have yet to find how they're managed.

@galikpali

This comment has been minimized.

Copy link

galikpali commented Dec 12, 2018

I've managed to figure it out.

Try to import RichText from wp.editor and use it instead of autocomplete.

<RichText value={this.state.value} onChange={this.setValue} autocompleters={completer} />

@abhijitrakas

This comment has been minimized.

Copy link
Contributor

abhijitrakas commented Feb 25, 2019

@thatdevgirl Thanks for the snippet. It saves lives. Just one question could we use dynamic ID for autocomplete uisng withInstanceId? Something like I have added here.

@manooweb

This comment has been minimized.

Copy link
Contributor Author

manooweb commented Feb 26, 2019

I definitively doesn't use this component which is too complex for our need.
I inspired myself from another one more simple component : urlInputButton in editor components
https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/url-input/index.js

I simplified it and integrated it in our own code to be sure we will be able to maintain it as we want even if it would be preferable to have one in Gutenberg code
https://github.com/polylang/polylang-gutenberg/blob/master/js/sidebar/components/translation-input/index.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.