Zones inside forms in 5.4 with nested components

[Casey Link <ca...@outskirtslabs.com>]

Hello all,,

I've got a component that is essentially several chained Selects.
However I'm using a custom component for the select to leverage the
select2 js library, so I'm not using Select exactly.

This parent component is included inside a form. When one of its child
selects changes, it sends an event. The event propagates, and the parent
component then attempts to render a zone inside itself. I then get the
exception : Component page/Index:chainedselect.customselect must be
enclosed by a Form component. must be enclosed by a Form component.

The structure looks like the following (abbreviated for clarity)

Page:
<t:layout
<t:zone t:id="createValueZone">
    <t:form zone="^" t:id="createValueForm">
        ...
        <t:chainedselect value1="value1 value2="value2"/>
        ...
    </t:form>
</t:zone>
</t:layout>

chainedselect Component:

<t:container>
    <t:customselect value="value1" .../>
    <div t:type="zone" t:id="value2Zone">
        <t:customselect value="value2" .../>
    </div>
</t:container>

ChainedSelect.java :
    @InjectComponent
    private Zone value2Zone;
   
    ...

    @OnEvent(value = CustomSelect.SELECTION_CHANGED)
    boolean selectionChanged(List<Value1> value1) {
        // do some things..
        if (request.isXHR()) {
            log.info(" render bitch");
            ajaxResponseRenderer.addRender(value2Zone); /// <---- this
triggers the exception Component page/Index:chainedselect.customselect
must be enclosed by a Form component.
        }
        return true;
    }
    ...


CustomSelect extends AbstractField
ChainedSelect does not extend anything

Clearly all the components in question are inside a form.

I see that the Select component uses some zone updater
(https://github.com/apache/tapestry-5/blob/master/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/Select.java#L255)
event link to update a zone.

However my CustomSelect also uses an event link, but sends an event back
to the CustomSelect component, which parses the request and triggers
different events depending on the state. It is one of these
(CustomSelect.SELECTION_CHANGED) that I'm using in the ChainedSelect to
update the zone.

I've read that FormInjedtor might be useful here, but I can't find any
meaningful examples.

Any tips?

-- 
Casey Link

Outskirts Labs { https://outskirtslabs.com }
Technology for Changemakers