Combobox autodrop with autocomplete obscures text entry area

asked 2016-08-25 19:08:48 +0800

scottz
1

updated 2016-08-25 21:13:05 +0800

We have the following combobox defined. As we type the number of options in the autodrop reduces, as it is supposed to. When we backspace in the text entry area to increase the number of options available, the autodrop obscures the text entry area. It obscures the area when I have deleted all letters in the text entry except for one (at least my current testing conditions show that as the case). If I delete the final letter, the autodrop places itself above the text entry field as expected (and the expected entries are in the autodrop).

If I type in one letter, the autodrop places itself above the text entry field as expected (and the expected entries are in the autodrop).

If I type in a second letter, the autodrop places itself above the text entry field as expected (and the expected entries are in the autodrop).

If I delete the last letter I type, the expected entries appear in the autodrop, but the autodrop is centered vertically over the text entry area.

Any thoughts on possible style definitions that need to be set or any other suggestions or is this a bug in zk?

            <combobox model="@load(mapLocationVM.codedLocationList)"  hflex="1"
                selectedItem="@save(mapLocationVM.selectedCodedLocation)"  
                value="@bind(mapLocationVM.location)"
                disabled="@load(mapLocationVM.disabled)"
                autocomplete="true"
                readonly="false"
                autodrop="@load(mapLocationVM.useCodedLocation or mapLocationVM.showAutocomplete )"
                onChange="@command('onChangeSave')" 
                onChanging="@command('onComboBoxTyping')"
                onSelect="@command('onCodedLocationSelected')"
                constraint="">
            <template name="model">
                <comboitem label="@load(each.vicinityName)" value="@load(each)"/>
            </template>
        </combobox>

Update:

I grabbed the html upon inspection for the div used to display the list of options:

<div id="tP6Qgn0-pp" class="z-combobox-pp   z-combobox-shadow" style="z-index: 1800; width: auto; height: auto; position: absolute; top: 679px; left: 335px;" tabindex="-1">
<table id="tP6Qgn0-cave" cellpadding="0" cellspacing="0" border="0" class="z-combobox-cave" style="height: auto; width: 100%;">
<tbody>
<tr id="tP6Qh20" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>ABC</td></tr>
<tr id="tP6Qi20" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>Acme Metal</td></tr>
<tr id="tP6Qj20" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>Tuttle PD HQ</td></tr>
<tr id="tP6Qk20" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>Hobby Airport</td></tr>
<tr id="tP6Qu20" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>Suuuuuuuugar Land</td></tr>
<tr id="tP6Qv20" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>B6923&%6%~!</td></tr>
<tr id="tP6Qw20" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>----23---24----25</td></tr>
<tr id="tP6Qx20" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>5555</td></tr>
<tr id="tP6Q9z" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>78787</td></tr>
<tr id="tP6Q8z" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>test</td></tr>
<tr id="tP6Qbz" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>TP3</td></tr>
<tr id="tP6Qaz" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>Big Momma's House</td></tr>
<tr id="tP6Qdz" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>Big Poppa's house</td></tr
><tr id="tP6Qc41" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>Big Bopper's House</td></tr>
<tr id="tP6Qcz" class="z-comboitem"><td class="z-comboitem-img"></td><td class="z-comboitem-text"><span class="z-comboitem-spacer"> </span>Baby Bopper's Crib</td></tr>
</tbody>
</table>

</div>

It looks like it's miscalculating the top position in certain circumstances