Redirect issue when using a ChooserBlock

[Nigel2392]

There is an issue when you select an item in synchronized pages.
When you select an item using a ChooserBlock, normally a JSON response is returned, and the object is updated in the frontend with javascript. This does not happen.

Instead, when you click an item of a ChooserBlock in a synchronized page, you will be forwarded to the JSON response page. This means, you will leave the regular admin area; and only see an ugly JSON response.

Example:

Vertaling.van.Kunststofnaar.German.-.Wagtail.-.Google.Chrome.2024-01-04.15-13-22.mp4

[zerolab]

Thank you for the report @Nigel2392. One more reason to get to #715 ASAP
Will see if I can find a fix for this over the weekend

[dassudip2001]

@zerolab I think redirecting to another page shows a JSON response instead of showing a model and binding the JSON response as a table-like format

[zerolab]

Yes, either the callback event is not registered. Or there is a JS error.

[dassudip2001]

if js error then can I fix this issue or is the model not present can I implement @zerolab

[zerolab]

@dassudip2001 I'm afraid you'd have to do the legwork for this as I don't know where the issue is (at least yet)

The test app has a good number of StreamField blocks using the chooser (e.g. https://github.com/wagtail/wagtail-localize/blob/main/wagtail_localize/test/models.py#L200-L209)

In theory you could even run the test app in a virtualenvironment to get a demo instance

[Nigel2392]

Some more info:

1. Logo's model is non-translatable.
2. Category model is translatable.
3. When inspecting (network and console) and using the "Persist log" option - no errors seem to occur.

This gives me the impression that the JS callback isn't properly registered - possibly this happened when Wagtail's chooserblock was made more generic.

The chain of events and my thoughts:

For regular choosers

1. Clicking on choose other snippet makes an ajax request to http://127.0.0.1:8080/admin/snippets/choose/<app_name>/<model_name>/, this retrieves the modal html? No errors occur at this step.

{"html": "\n\n\n<header class=\"w-header w-header--merged\">\n    <div class=\"row\">\n        <div class=\"left\">\n            <div class=\"col\">\n                \n                    <h1 class=\"w-header__title\" id=\"header-title\">\n                        \n                            <svg class=\"icon icon-image w-header__glyph\" aria-hidden=\"true\"><use href=\"#icon-image\"></use></svg>\n                        \n                        Kies <span class=\"w-header__subtitle\">Logo&#x27;s</span>\n                    </h1>\n                \n                \n            </div>\n            \n        </div>\n        <div class=\"right\">\n            \n                \n            \n            \n        </div>\n    </div>\n    \n</header>\n\n\n\n\n\n<div class=\"w-tabs\" >\n    \n        \n        <div class=\"w-tabs__wrapper\"></div>\n    \n\n    <div class=\"tab-content\">\n        <section\n            id=\"tab-search\"\n            class=\"w-tabs__panel\"\n            role=\"tabpanel\"\n            aria-labelledby=\"tab-label-search\"\n        >\n\n            \n                \n            \n\n            \n                <div id=\"search-results\" class=\"listing\">\n                    \n\n\n    \n        \n    \n\n    \n        \n\n<table class=\"listing\">\n    \n    <thead>\n        <tr >\n            \n                \n<th >\n    \n        Titel\n    \n    \n</th>\n\n            \n        </tr>\n    </thead>\n    <tbody>\n        \n            <tr>\n                \n                    \n\n<td class=\"title\">\n    <div class=\"title-wrapper\">\n        \n            \n                <a  data-chooser-modal-choice href=\"/admin/snippets/choose/blockapp/logos/chosen/1/\">Branding</a>\n            \n        \n    </div>\n    \n</td>\n\n                \n            </tr>\n        \n    </tbody>\n</table>\n\n    \n    \n\n\n\n\n\n<nav class=\"pagination\" aria-label=\"Pagineren\">\n    <p>Pagina 1 van 1.</p>\n    <ul>\n        <li class=\"prev\">\n            \n        </li>\n        <li class=\"next\">\n            \n        </li>\n    </ul>\n</nav>\n\n\n\n                </div>\n            \n        </section>\n\n        \n    </div>\n</div>\n", "step": "choose"}

2. When chosen - the page immediately goes to the new JSON view (http://127.0.0.1:8080/admin/snippets/choose/<app_name>/<model_name>/chosen/<model_id>/).
   The view replies with:

{"step": "chosen", "result": {"id": "2", "string": "Kozijnen", "edit_url": "/admin/snippets/products/category/edit/2/"}}

There is no redirect. There are no errors. This is a direct reply, as if you were to just click an anchor tag manually.
This means there is likely no callback being registered when the modal HTML gets appended to the document.
It happens for both translatable and non translatable models, likely since they use the same Chooser class underneath. I might be misremembering - but I am fairly certain wagtail's Document, Image and PageChooser blocks use a different implementation (and event callbacks) from the ChooserBlock which is used for say, snippets (and custom chooserblock implementations!).

Regular chooser chain of events are now over.

For images:

1. Clicking on choose other image makes an ajax request to http://127.0.0.1:8080/admin/images/chooser/.
   This retrieves the modal HTML - there might be a different mechanism of adding eventlisteners to image-chooser modals.

{
    "html": "\n\n\n<header class=\"w-header w-header--merged\">\n    <div class=\"row\">\n        <div class=\"left\">\n            <div class=\"col\">\n                \n                    <h1 class=\"w-header__title\" id=\"header-title\">\n                        \n                            <svg class=\"icon icon-image w-header__glyph\" aria-hidden=\"true\"><use href=\"#icon-image\"></use></svg>\n                        \n                        Kies een afbeelding\n                    </h1>\n                \n                \n            </div>\n            \n        </div>\n        <div class=\"right\">\n            \n                \n            \n            \n        </div>\n    </div>\n    \n</header>\n\n\n\n    \n    \n\n\n\n<div class=\"w-tabs\" data-tabs data-tabs-disable-url>\n    \n        <div class=\"w-tabs__wrapper w-overflow-hidden\">\n            <div role=\"tablist\" class=\"w-tabs__list w-w-full\">\n                \n\n\n\n<a id=\"tab-label-search\" href=\"#tab-search\" class=\"w-tabs__tab \" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\">\n    Zoeken\n    <div class=\"w-tabs__errors\" data-controller=\"w-count\" data-w-count-active-class=\"!w-flex\" data-w-count-container-value=\"#tab-search\">\n        <span aria-hidden=\"true\" data-w-count-target=\"total\"></span>\n        <span class=\"w-sr-only\">(<span data-w-count-target=\"label\"></span>)</span>\n    </div>\n</a>\n\n                \n\n\n\n<a id=\"tab-label-upload\" href=\"#tab-upload\" class=\"w-tabs__tab \" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\">\n    Uploaden\n    <div class=\"w-tabs__errors\" data-controller=\"w-count\" data-w-count-active-class=\"!w-flex\" data-w-count-container-value=\"#tab-upload\">\n        <span aria-hidden=\"true\" data-w-count-target=\"total\"></span>\n        <span class=\"w-sr-only\">(<span data-w-count-target=\"label\"></span>)</span>\n    </div>\n</a>\n\n            </div>\n        </div>\n    \n\n    <div class=\"tab-content\">\n        <section\n            id=\"tab-search\"\n            class=\"w-tabs__panel\"\n            role=\"tabpanel\"\n            aria-labelledby=\"tab-label-search\"\n        >\n\n            \n    <form data-chooser-modal-search action=\"/admin/images/chooser/results/\" method=\"GET\" autocomplete=\"off\" novalidate>\n        <ul class=\"fields\">\n            \n                <li>\n                    \n\n\n\n\n\n<div class=\"w-field__wrapper \" data-field-wrapper>\n\n    \n    \n        \n        <label class=\"w-field__label\" for=\"id_q\" id=\"id_q-label\">\n            Zoekterm\n        </label>\n    \n\n    \n    \n    <div class=\"w-field w-field--char_field w-field--text_input\" data-field data-contentpath=\"q\">\n\n        \n        <div class=\"w-field__errors\" data-field-errors >\n            \n            \n        </div>\n\n        \n        \n        <div class=\"w-field__help\"  data-field-help>\n            \n            \n        </div>\n\n        \n        <div class=\"w-field__input\" data-field-input>\n            \n\n            \n                \n                    <input type=\"text\" name=\"q\" placeholder=\"Zoeken\" id=\"id_q\">\n                \n            \n\n            \n        </div>\n    </div>\n</div>\n\n                </li>\n            \n                <li>\n                    \n\n\n\n\n\n<div class=\"w-field__wrapper \" data-field-wrapper>\n\n    \n    \n        \n        <label class=\"w-field__label\" for=\"id_collection_id\" id=\"id_collection_id-label\">\n            Collectie\n        </label>\n    \n\n    \n    \n    <div class=\"w-field w-field--choice_field w-field--select\" data-field data-contentpath=\"collection_id\">\n\n        \n        <div class=\"w-field__errors\" data-field-errors >\n            \n            \n        </div>\n\n        \n        \n        <div class=\"w-field__help\"  data-field-help>\n            \n            \n        </div>\n\n        \n        <div class=\"w-field__input\" data-field-input>\n            \n\n            \n                \n                    <select name=\"collection_id\" data-chooser-modal-search-filter id=\"id_collection_id\">\n  <option value=\"\" selected>Alle collecties</option>\n\n  <option value=\"1\">Root</option>\n\n  <option value=\"11\">&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Branding</option>\n\n  <option value=\"3\">&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Carousel Images</option>\n\n  <option value=\"6\">&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Forms</option>\n\n  <option value=\"2\">&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Icons</option>\n\n  <option value=\"4\">&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Producten</option>\n\n  <option value=\"7\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Catalogus</option>\n\n  <option value=\"10\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Aluminium</option>\n\n  <option value=\"24\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Blokkozijnen</option>\n\n  <option value=\"17\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Deuren</option>\n\n  <option value=\"18\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Aluminium</option>\n\n  <option value=\"23\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Dubbele</option>\n\n  <option value=\"20\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Hordeuren</option>\n\n  <option value=\"21\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Houten</option>\n\n  <option value=\"19\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Kunststof</option>\n\n  <option value=\"22\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Openslaande / Tuindeuren</option>\n\n  <option value=\"9\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Hout</option>\n\n  <option value=\"8\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Kunststof</option>\n\n  <option value=\"25\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Kunststof-Aluminium</option>\n\n  <option value=\"26\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Schuifpui</option>\n\n  <option value=\"28\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Aluminium</option>\n\n  <option value=\"29\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Houten</option>\n\n  <option value=\"27\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Kunststof</option>\n\n  <option value=\"30\">&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Showroom</option>\n\n</select>\n                \n            \n\n            \n        </div>\n    </div>\n</div>\n\n                </li>\n            \n            \n        </ul>\n    </form>\n\n\n            \n                <div id=\"search-results\" class=\"listing\">\n                    \n\n\n    \n        <h2>Laatste afbeeldingen</h2>\n    \n\n    \n    <ul class=\"listing horiz images chooser\">\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_SR_0012_6b12b53339\" href=\"/admin/images/chooser/chosen/2843/\">\n                        <div class=\"image\"><img alt=\"csm_SR_0012_6b12b53339\" class=\"show-transparency\" height=\"109\" src=\"/media/images/csm_SR_0012_6b12b53339.max-165x165.jpg\" width=\"165\"></div>\n                        <h3>csm_SR_0012_6b12b53339</h3>\n                    </a>\n                \n            </li>\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_DSC04497_ec454271e0\" href=\"/admin/images/chooser/chosen/2842/\">\n                        <div class=\"image\"><img alt=\"csm_DSC04497_ec454271e0\" class=\"show-transparency\" height=\"109\" src=\"/media/images/csm_DSC04497_ec454271e0.max-165x165.jpg\" width=\"165\"></div>\n                        <h3>csm_DSC04497_ec454271e0</h3>\n                    </a>\n                \n            </li>\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_DSC04499_39c06b3b90\" href=\"/admin/images/chooser/chosen/2841/\">\n                        <div class=\"image\"><img alt=\"csm_DSC04499_39c06b3b90\" class=\"show-transparency\" height=\"109\" src=\"/media/images/csm_DSC04499_39c06b3b90.max-165x165.jpg\" width=\"165\"></div>\n                        <h3>csm_DSC04499_39c06b3b90</h3>\n                    </a>\n                \n            </li>\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_IMG-20151028-WA0003_37016ff1d3\" href=\"/admin/images/chooser/chosen/2840/\">\n                        <div class=\"image\"><img alt=\"csm_IMG-20151028-WA0003_37016ff1d3\" class=\"show-transparency\" height=\"123\" src=\"/media/images/csm_IMG-20151028-WA0003_37016ff1d3.max-165x165.jpg\" width=\"165\"></div>\n                        <h3>csm_IMG-20151028-WA0003_37016ff1d3</h3>\n                    </a>\n                \n            </li>\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_IMG_0451_65263f9513\" href=\"/admin/images/chooser/chosen/2839/\">\n                        <div class=\"image\"><img alt=\"csm_IMG_0451_65263f9513\" class=\"show-transparency\" height=\"165\" src=\"/media/images/csm_IMG_0451_65263f9513.max-165x165.jpg\" width=\"123\"></div>\n                        <h3>csm_IMG_0451_65263f9513</h3>\n                    </a>\n                \n            </li>\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_IMG_0702_cd4763dd3f\" href=\"/admin/images/chooser/chosen/2838/\">\n                        <div class=\"image\"><img alt=\"csm_IMG_0702_cd4763dd3f\" class=\"show-transparency\" height=\"109\" src=\"/media/images/csm_IMG_0702_cd4763dd3f.max-165x165.jpg\" width=\"165\"></div>\n                        <h3>csm_IMG_0702_cd4763dd3f</h3>\n                    </a>\n                \n            </li>\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_SR_0031_139d30f3ef\" href=\"/admin/images/chooser/chosen/2837/\">\n                        <div class=\"image\"><img alt=\"csm_SR_0031_139d30f3ef\" class=\"show-transparency\" height=\"109\" src=\"/media/images/csm_SR_0031_139d30f3ef.max-165x165.jpg\" width=\"165\"></div>\n                        <h3>csm_SR_0031_139d30f3ef</h3>\n                    </a>\n                \n            </li>\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_SR_0029_b95644941c\" href=\"/admin/images/chooser/chosen/2836/\">\n                        <div class=\"image\"><img alt=\"csm_SR_0029_b95644941c\" class=\"show-transparency\" height=\"109\" src=\"/media/images/csm_SR_0029_b95644941c.max-165x165.jpg\" width=\"165\"></div>\n                        <h3>csm_SR_0029_b95644941c</h3>\n                    </a>\n                \n            </li>\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_SR_0021_ed9cb8cf8e\" href=\"/admin/images/chooser/chosen/2835/\">\n                        <div class=\"image\"><img alt=\"csm_SR_0021_ed9cb8cf8e\" class=\"show-transparency\" height=\"109\" src=\"/media/images/csm_SR_0021_ed9cb8cf8e.max-165x165.jpg\" width=\"165\"></div>\n                        <h3>csm_SR_0021_ed9cb8cf8e</h3>\n                    </a>\n                \n            </li>\n        \n            <li>\n                \n                    <a data-chooser-modal-choice class=\"image-choice\" title=\"Showroom » csm_SR_0019_762c81bb16\" href=\"/admin/images/chooser/chosen/2834/\">\n                        <div class=\"image\"><img alt=\"csm_SR_0019_762c81bb16\" class=\"show-transparency\" height=\"109\" src=\"/media/images/csm_SR_0019_762c81bb16.max-165x165.jpg\" width=\"165\"></div>\n                        <h3>csm_SR_0019_762c81bb16</h3>\n                    </a>\n                \n            </li>\n        \n    </ul>\n\n    \n\n\n\n\n\n<nav class=\"pagination\" aria-label=\"Pagineren\">\n    <p>Pagina 1 van 155.</p>\n    <ul>\n        <li class=\"prev\">\n            \n        </li>\n        <li class=\"next\">\n            \n                <a href=\"/admin/images/chooser/results/?p=2\">\n                    Volgende\n                    <svg class=\"icon icon-arrow-right default\" aria-hidden=\"true\"><use href=\"#icon-arrow-right\"></use></svg>\n                </a>\n            \n        </li>\n    </ul>\n</nav>\n\n\n\n                </div>\n            \n        </section>\n\n        \n            \n<section\n    id=\"tab-upload\"\n    class=\"w-tabs__panel\"\n    role=\"tabpanel\"\n    hidden\n    aria-labelledby=\"tab-label-upload\"\n>\n    \n\n    <form data-chooser-modal-creation-form action=\"/admin/images/chooser/create/\" method=\"POST\" enctype=\"multipart/form-data\" novalidate>\n        <input type=\"hidden\" name=\"csrfmiddlewaretoken\" value=\"qXbZFA2jQrbM6x2sN3hNqywQwFuTOBunzg0tIezuB00ix0GWSgjB65aexgj3n4Xv\">\n        <input type=\"hidden\" name=\"image-chooser-upload-focal_point_x\" class=\"focal_point_x\" id=\"id_image-chooser-upload-focal_point_x\"><input type=\"hidden\" name=\"image-chooser-upload-focal_point_y\" class=\"focal_point_y\" id=\"id_image-chooser-upload-focal_point_y\"><input type=\"hidden\" name=\"image-chooser-upload-focal_point_width\" class=\"focal_point_width\" id=\"id_image-chooser-upload-focal_point_width\"><input type=\"hidden\" name=\"image-chooser-upload-focal_point_height\" class=\"focal_point_height\" id=\"id_image-chooser-upload-focal_point_height\">\n\n        <ul class=\"fields\">\n            \n                <li>\n                    \n\n\n\n\n\n<div class=\"w-field__wrapper \" data-field-wrapper>\n\n    \n    \n        \n        <label class=\"w-field__label\" for=\"id_image-chooser-upload-title\" id=\"id_image-chooser-upload-title-label\">\n            Titel<span class=\"w-required-mark\">*</span>\n        </label>\n    \n\n    \n    \n    <div class=\"w-field w-field--char_field w-field--text_input\" data-field data-contentpath=\"title\">\n\n        \n        <div class=\"w-field__errors\" data-field-errors >\n            \n            \n        </div>\n\n        \n        \n        <div class=\"w-field__help\"  data-field-help>\n            \n            \n        </div>\n\n        \n        <div class=\"w-field__input\" data-field-input>\n            \n\n            \n                \n                    <input type=\"text\" name=\"image-chooser-upload-title\" maxlength=\"255\" required id=\"id_image-chooser-upload-title\">\n                \n            \n\n            \n        </div>\n    </div>\n</div>\n\n                </li>\n            \n                <li>\n                    \n\n\n\n\n\n<div class=\"w-field__wrapper \" data-field-wrapper>\n\n    \n    \n        \n        <label class=\"w-field__label\" for=\"id_image-chooser-upload-file\" id=\"id_image-chooser-upload-file-label\">\n            Bestand<span class=\"w-required-mark\">*</span>\n        </label>\n    \n\n    \n    \n    <div class=\"w-field w-field--wagtail_image_field w-field--file_input\" data-field data-contentpath=\"file\">\n\n        \n        <div class=\"w-field__errors\" data-field-errors >\n            \n            \n        </div>\n\n        \n        \n        <div class=\"w-field__help\" id=\"id_image-chooser-upload-file-helptext\" data-field-help>\n            \n            \n                <div class=\"help\">Ondersteunde bestandsformaten: JPG, JPEG, PNG, GIF, SVG. Maximale bestandsgrootte: 20,0 MB.</div>\n            \n        </div>\n\n        \n        <div class=\"w-field__input\" data-field-input>\n            \n\n            \n                \n                    <input type=\"file\" name=\"image-chooser-upload-file\" accept=\"image/*\" aria-describedby=\"id_image-chooser-upload-file-helptext\" required id=\"id_image-chooser-upload-file\">\n                \n            \n\n            \n        </div>\n    </div>\n</div>\n\n                </li>\n            \n                <li>\n                    \n\n\n\n\n\n<div class=\"w-field__wrapper \" data-field-wrapper>\n\n    \n    \n        \n        <label class=\"w-field__label\" for=\"id_image-chooser-upload-collection\" id=\"id_image-chooser-upload-collection-label\">\n            Collectie<span class=\"w-required-mark\">*</span>\n        </label>\n    \n\n    \n    \n    <div class=\"w-field w-field--collection_choice_field w-field--select_with_disabled_options\" data-field data-contentpath=\"collection\">\n\n        \n        <div class=\"w-field__errors\" data-field-errors >\n            \n            \n        </div>\n\n        \n        \n        <div class=\"w-field__help\"  data-field-help>\n            \n            \n        </div>\n\n        \n        <div class=\"w-field__input\" data-field-input>\n            \n\n            \n                \n                    <select name=\"image-chooser-upload-collection\" id=\"id_image-chooser-upload-collection\">\n  <option value=\"1\">Root</option>\n\n  <option value=\"11\">Branding</option>\n\n  <option value=\"3\">Carousel Images</option>\n\n  <option value=\"6\">Forms</option>\n\n  <option value=\"2\">Icons</option>\n\n  <option value=\"4\">Producten</option>\n\n  <option value=\"7\">&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Catalogus</option>\n\n  <option value=\"10\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Aluminium</option>\n\n  <option value=\"24\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Blokkozijnen</option>\n\n  <option value=\"17\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Deuren</option>\n\n  <option value=\"18\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Aluminium</option>\n\n  <option value=\"23\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Dubbele</option>\n\n  <option value=\"20\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Hordeuren</option>\n\n  <option value=\"21\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Houten</option>\n\n  <option value=\"19\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Kunststof</option>\n\n  <option value=\"22\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Openslaande / Tuindeuren</option>\n\n  <option value=\"9\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Hout</option>\n\n  <option value=\"8\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Kunststof</option>\n\n  <option value=\"25\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Kunststof-Aluminium</option>\n\n  <option value=\"26\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Schuifpui</option>\n\n  <option value=\"28\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Aluminium</option>\n\n  <option value=\"29\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Houten</option>\n\n  <option value=\"27\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x21b3 Kunststof</option>\n\n  <option value=\"30\">Showroom</option>\n\n</select>\n                \n            \n\n            \n        </div>\n    </div>\n</div>\n\n                </li>\n            \n                <li>\n                    \n\n\n\n\n\n<div class=\"w-field__wrapper \" data-field-wrapper>\n\n    \n    \n        \n        <label class=\"w-field__label\" for=\"id_image-chooser-upload-tags\" id=\"id_image-chooser-upload-tags-label\">\n            Tags\n        </label>\n    \n\n    \n    \n    <div class=\"w-field w-field--tag_field w-field--admin_tag_widget\" data-field data-contentpath=\"tags\">\n\n        \n        <div class=\"w-field__errors\" data-field-errors >\n            \n            \n        </div>\n\n        \n        \n        <div class=\"w-field__help\"  data-field-help>\n            \n            \n        </div>\n\n        \n        <div class=\"w-field__input\" data-field-input>\n            \n\n            \n                \n                    <input type=\"text\" name=\"image-chooser-upload-tags\" data-controller=\"w-tag\" id=\"id_image-chooser-upload-tags\" data-w-tag-url-value=\"/admin/tag-autocomplete/\" data-w-tag-options-value=\"{&quot;allowSpaces&quot;: true, &quot;tagLimit&quot;: null, &quot;autocompleteOnly&quot;: false}\">\n\n\n<p class=\"help\">Tags die uit meerdere woorden bestaan worden automatisch tussen aanhalingstekens (&quot;) geplaatst.</p>\n                \n            \n\n            \n        </div>\n    </div>\n</div>\n\n                </li>\n            \n            <li>\n                \n                    <button\n                        type=\"submit\"\n                        class=\"button button-longrunning\"\n                        data-controller=\"w-progress\"\n                        data-action=\"w-progress#activate\"\n                        data-w-progress-active-value=\"Bezig met uploaden…\"\n                    >\n                        <svg class=\"icon icon-spinner icon\" aria-hidden=\"true\"><use href=\"#icon-spinner\"></use></svg>\n                        <em data-w-progress-target=\"label\">Uploaden</em>\n                    </button>\n                \n            </li>\n        </ul>\n    </form>\n</section>\n\n        \n    </div>\n</div>\n",
    "step": "choose"
}

2. Then when selecting an image - there is an eventlistener registered. It uses ajax to fetch to http://127.0.0.1:8080/admin/images/chooser/chosen/<image_id>/.
   This retrieves the following JSON object:

{
    "step": "chosen",
    "result": {
        "id": "2843",
        "title": "csm_SR_0012_6b12b53339",
        "edit_url": "/admin/images/2843/",
        "preview": {
            "url": "/media/images/csm_SR_0012_6b12b53339.max-165x165.jpg",
            "width": 165,
            "height": 109
        }
    }
}

3. Then from javascript - a PUT request gets made to update the synchronized page:
   (http://127.0.0.1:8080/admin/localize/translate/<model_id>/overrides/<segment_id>/edit/).
   The eventlisteners seem to be properly registered to the modal.

{
    "segment_id": 578,
    "data": "2843",
    "error": null
}

Image-chooser chain of events is now over.

Update

It most certaintly is the eventlisteners not being added properly.
I have checked by going inside the SnippetChooser modal, and running the following script in the JS console.

elements = document.querySelectorAll("[data-chooser-modal-choice]"); for (let i=0; i < elements.length; i++) {console.log(getEventListeners(elements[i]))};

This prints:

elements = document.querySelectorAll("[data-chooser-modal-choice]"); for (let i=0; i < elements.length; i++) {console.log(getEventListeners(elements[i]))};
VM1286:1 {}
VM1286:1 {}
VM1286:1 {}
VM1286:1 {}
VM1286:1 {}
VM1286:1 {}
VM1286:1 {}
VM1286:1 {}
VM1286:1 {}
VM1286:1 {}

I have then ran the same script inside the image-chooser modal.
The output:

elements = document.querySelectorAll("[data-chooser-modal-choice]"); for (let i=0; i < elements.length; i++) {console.log(getEventListeners(elements[i]))};
VM1370:1 {click: Array(1)}
VM1370:1 {click: Array(1)}
VM1370:1 {click: Array(1)}
VM1370:1 {click: Array(1)}
VM1370:1 {click: Array(1)}
VM1370:1 {click: Array(1)}
VM1370:1 {click: Array(1)}
VM1370:1 {click: Array(1)}
VM1370:1 {click: Array(1)}
VM1370:1 {click: Array(1)}

This again implies there is no callback event being registered for SnippetChooser blocks - and custom ChooserBlock's after the modal HTML gets fetched and appended.

[PaoloC68]

I have the same issue and I just wonder if there is any solution, even temporary?

[zerolab]

I've been looking into this.
tl;dr at some point pre 5.2 the snippet chooser was updated to pretty much be as generic as it comes.

We do

wagtail-localize/wagtail_localize/static_src/editor/components/TranslationEditor/segments.tsx

Lines 736 to 749 in f005601

	(window as any).ModalWorkflow({
	url: widget.chooser_url,
	onload: (window as any).SNIPPET_CHOOSER_MODAL_ONLOAD_HANDLERS,
	responses: {
	snippetChosen: function (snippetData: any) {
	saveOverride(
	segment,
	snippetData.id,
	csrfToken,
	dispatch
	);
	},
	},
	});

, but window.SNIPPET_CHOOSER_MODAL_ONLOAD_HANDLERS is no longer there, so none of the default chooser handlers are run (init search, ajaxifying links etc)

Looking at a workaround

[zerolab]

Fixed and released v1.9 with full Wagtail 6 support