Skip to content

issues with amp-list in amp-selector #9536

@aghassemi

Description

@aghassemi

if amp-list renders new options inside an amp-selector, amp-selector has no idea and does not rescan children to find these new options.

Repro case from @gustavopaes

<!-- Template -->
<amp-selector name="fipe-category" layout="container" on="select:AMP.setState({controller: {category: event.targetOption}})">
    <ul>
        <amp-list
            src="https://carros.uol.com.br/service.htm?type=areas/carros/fipe-table-api&args={'params':{'category':1}}&json"
            height="100"
            width="100"
            [src]="controller.category == false ? '' : config.service"
            items="docs"
            layout="responsive"
            >
            <template type="amp-mustache">
                <li option="{{.}}" value="{{.}}">{{.}}</li>
            </template>
        </amp-list>
    </ul>
</amp-selector>

<!-- After javascript run -->
<amp-selector name="fipe-category" layout="container" on="select:AMP.setState({controller: {category: event.targetOption}})" class="i-amphtml-element i-amphtml-layout-container i-amphtml-layout" role="listbox">
    <ul>
        <amp-list src="https://carros.uol.com.br/tabela-fipe/index.amp.htm" height="100" width="100" [src]="controller.category == false ? '' : config.service" items="docs" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" aria-live="polite" style="height: 2088px;">
            <template type="amp-mustache">
                <li option="{{.}}" value="{{.}}">{{.}}</li>
            </template>

            <div class="i-amphtml-fill-content i-amphtml-replaced-content" role="list">
                <!-- Look the option, it's empty and it's required by amp-selector -->
                <li option="" value="Acura" role="listitem">Acura</li>
                <li option="" value="Agrale" role="listitem">Agrale</li>
                <li option="" value="Alfa Romeo" role="listitem" aria-selected="false">Alfa Romeo</li>
                <li option="" value="Walk" role="listitem">Walk</li>
            </div>
        </amp-list>
    </ul>
    <input type="hidden" name="fipe-category" value="">
</amp-selector>

/to @camelburrito
/cc @gustavopaes

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions