Custom chooser widgets have an empty state on first load

[robertsoakes]

I've been watching the development of this package with quite some interest. It greatly improves the speed and performance of StreamField, thank you for creating it!

I've been seeing some strange behavior for custom chooser blocks. On the load of a page where values have been specified for a chooser widget, the chooser starts in a blank state . (An of a chooser where this behavior can be seen is in the Wagtail Media package. Please note that we have the same problems with three other custom choosers that we have created.)

The screenshot shows an example of how the problem manifests. The example block has a background video with both a media object and a custom icon class selected:

This is what the state should look like:

If we disable Wagtail React StreamField by removing the package from the INSTALLED_APPS, it resolves the issue. What is strange is that not all choosers are affected. Built-in choosers, such as the image chooser and page chooser, work as expected.

Do you have any idea what might cause this behavior? Is this a bug in React StreamField or are we failing to implement all of the properties required. Any insight would be appreciated.

[Shagrat]

If we disable Wagtail React StreamField by removing the package from the INSTALLED_APPS, it resolves the issue. What is strange is that not all choosers are affected. Built-in choosers, such as the image chooser and page chooser, work as expected.

Just as opinion but i don't think this is a wagtail-react-streamfield issue, built-in choosers work as intended because they are specifically rewritten for wagtail-react-streamfield (you can check them out it here

So i think best way to make custom choosers to work is to override Widget (AdminMediaChooser) on your Custom Media Block and also add hook with javascript code that will drive custom Chooser Widget.

[robertsoakes]

Thank you for the guidance. We had already implemented about 3/4 of your suggestion since there were other parts of the behavior we wanted to customize.

Using your example and prompt, I've been able to modify two of our choosers so that they include the extra step of loading data on startup. While I know that this will be the new default behavior moving forward, I strongly suggest that you include a section in the documentation describing the need to load client view state upon init.

Most of our custom choosers render view state on the server rather than relying on JavaScript. Once I was able to see a couple of the new examples and the extra steps, I was able to see what logic was missing. Seeing something in the docs to prompt me to do this would have been helpful.

Just as opinion, but I don't think this is a wagtail-react-streamfield issue, built-in choosers work as intended because they are specifically rewritten ...

I disagree.

While I believe plugin authors have a need to stay on top of development, I would suggest that you document the change of behavior. To date, it's been possible to allow server-side render of state and trust that it will be represented on the client. With your plugin installed, it's necessary to go to the extra step of initializing state using the input value. This will impact anyone with custom choosers and has the potential of breaking a very large number of applications. If it were me, I would have notices in the README, changelog, and announcements.

With that said, thank you for an awesome extension to Wagtail. I'm really looking forward to this getting incorporated into core. Cheers!

[Shagrat]

@robertsoakes Thing is, i'am not an author:) Just came across this issue and were trying to help:) I'am fully aggree with you that this kind of behaviour needs to be documented.

[BertrandBordage]

@robertsoakes I am the author :) As explained by @Shagrat, wagtail-react-streamfield had to rebuild part of the choosers JavaScript, because they weren’t clean. A full rewrite of choosers based on React is in progress by @kaedroho in a Wagtail PR.

It is planned to have a note about it in the Wagtail release notes in the version it will be merged in.

I leave the issue open for reference, though I mark it as wontfix.

[kaedroho]

@BertrandBordage Just to be clear, I haven't worked on that PR in a couple of years and it only included the choosers themselves, not the form widgets.

[BertrandBordage]

Right, but that’s still the direction we want to follow :)

[b99andla]

Is there any guide somewhere to follow for doing this? I am using wagtail-modelchooser and am having problems with not seeing the chosen models. What do I need to change?

I would gladly help in documenting the procedure if pointed in the right direction... Have I understood it correctly that I have to hook in to the javascript for the modelchoosers and add the hallo-bootstrap as well as some modelchooser specific js to get this to work?

[rafagarciac]

Hi @BertrandBordage could you please give us a temporal fix or something related according to this issue ?
I'm trying to implement this package https://github.com/Aleksi44/wagtailsvg and I it has a unusual functionality on ChooserBlock because of this.

Wagtail Test Project - https://github.com/rafagarciac/wagtailsvg-project

Check out this issue: Aleksi44/wagtailsvg#8