Nested InstanceSelectorPanel loses selectability

[danthedeckie]

If I have open a Instance Selector Panel pop-up, and then create a new object in there to select, it's fine.

But if while it's open, I open an Instance Selector Panel defined on that object - so being 2 levels deep, kind of thing,
then when I save the original object, it shows a regular admin listing view - so with 'edit' and 'delete' buttons, and no 'select' button.

Pseudo code:

class Category(ClusterableModel):
    name = models.CharField(max_length=100)


class Product(ClusterableModel):
    name = models.CharField(max_length=100)

    panels = [
        FieldPanel('name'),
        InlinePanel('categories')
    ]


class ProductCategory(ClusterableModel):
    category = ParentalKey(Category, on_delete=models.CASCADE, related_name="products")
    product = ParentalKey(Produce, on_delete=models.CASCADE, related_name="categories")

    panels = [
         InstanceSelectorPanel('category'),
         InstanceSelectorPanel('product'),
    ]


class ShopPage(Page):
    ...
    common_panels = [
        InlinePanel("shop_products"),
    ]


class ShopProduct(ClusterableModel):
    product = ParentalKey(Product, on_delete=models.CASCADE)
    parent_page = ParentalKey(ShopPage, on_delete=models.CASCADE, related_name="shop_products")
    panels = [
         InstanceSelectorPanel('product'),
         PageSelectorPanel('parent_page'),
    ]

I've solved currently by switching all of the sub-selectors into a more basic ModelChooserPanel that we're using in other places in the project.

[markfinger]

Thanks for the report.

This is the JS code that injects the "Select" button:

wagtail-instance-selector/instance_selector/static/instance_selector/instance_selector_embed.js

Lines 34 to 47 in 7a62164

	$('.listing').find('tbody tr[data-object-pk]').each(function() {
	const object_pk = this.getAttribute('data-object-pk');
	const select_action = $(
	'<li class="instance-selector__select-button">' +
	'<a class="button button-secondary button-small" title="Select this object" data-instance-selector-pk="' + object_pk + '">Select</a>' +
	'</li>'
	);
	let actions = $(this).find('.actions');
	if (!actions.length) {
	actions = $('<ul class="actions"></ul>');
	$(this).children('td').first().append(actions);
	}
	actions.append(select_action);
	});

.

I'm unlikely to have the time to look into this myself, so PRs are welcome.

[markfinger]

Actually, could be this block of JS instead:

wagtail-instance-selector/instance_selector/static/instance_selector/instance_selector_embed.js

Lines 55 to 82 in 7a62164

	// Allow users to select items referenced in creation success messages
	const success_messages = $('.messages .success');
	success_messages.each(function() {
	const success_message = $(this);
	const buttons = success_message.find('.buttons a');
	buttons.each(function() {
	const button = $(this);
	const button_text = button.text().trim();
	if (button_text.toLowerCase() === 'edit') {
	const url = button.attr('href');
	const data = get_data_from_url(url);
	if (data) {
	const select_button = $(`
	<a
	class="button button-small button-secondary instance-selector__success-message__select-button"
	data-object-pk-for-debugging="${data.object_pk}"
	>Select</a>
	`);
	button.parent().prepend(select_button);
	select_button.on('click', function(event) {
	event.preventDefault();
	handle_object_pk_selected(data.object_pk);
	});
	}
	}
	});
	});