dinamically adding easydropdowns doesn't work on android chrome

[DonGiulio]

hello,

I have a form where I need to add dinamically easydropdowns on users' request. While this works fine on computer's chrome/brave, it doesn't seem to work on android mobile.

in the form I basically clone the whole section of the form, clean up the .edd-root elements, and then call again easydropdown .all() (I get exactly the same if I call easydropdown with each element).

the result is that the original dropdowns remain functional, no changes there, the new dropdowns look like they have been initialised right, and the select has been decorated with the following divs:

    <div class="edd-root edd-root-native" role="widget combobox" aria-haspopup="listbox">
        <div class="edd-head" data-ref="head">
            <div class="edd-value" data-ref="value">
            </div>
            <div class="edd-arrow" role="presentation"></div>
            <select name="title" id="title" class="edd-select" aria-hidden="true">
                <option value=""></option>
                <option selected="selected" value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Ms">Ms</option>
                <option value="Miss">Miss</option>
             </select>
        </div>
    </div>

But if I click on it no dropdown is shown,
using the inspector on the selectors, on the browser I can see a bunch of aria/classes being added/removed when I click,
my inspector shows no changes when I click on the mobile.

Just to reiterate this works fine on Computer (os-x) chrome/brave, I get the issue only on the android mobile chrome/brave

I tried generating a jsfiddle to show the issue, but had troubles initialising and rendering the easydropdown properly, here: https://jsfiddle.net/1jzdg8qv/12/

[DonGiulio]

I just realised that a whole div with edd-* stuff is not added in the mobile version

here's the comparison, the two versions are generated by the very same code

the whole edd-body div is missing

added desktop version:

<div class="no-margin">
    <div class="edd-root" role="widget combobox" aria-haspopup="listbox">
        <div class="edd-head" data-ref="head">
            <div class="edd-value" data-ref="value"></div>
            <div class="edd-arrow" role="presentation"></div>
            <select name="title" id="title" class="edd-select" aria-hidden="true">
                <option value=""></option>
                <option selected="selected" value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Ms">Ms</option>
                <option value="Miss">Miss</option>
                <option value="Doc">Doc</option>
                <option value="Rev">Rev</option>
                <option value="Prof">Prof</option>
                <option value="C/O">C/O</option>
            </select>
        </div>

                
        <div class="edd-body edd-body-at-top" data-ref="body" role="listbox" aria-hidden="">
            <div class="edd-items-list" data-ref="itemsList">
                <div class="edd-group" data-ref="group" role="group">
                    <div class="edd-option edd-option-selected" data-ref="option item" role="option" title="" aria-selected="true"></div>
                    <div class="edd-option" data-ref="option item" role="option" title="Mr">Mr</div>
                    <div class="edd-option" data-ref="option item" role="option" title="Mrs">Mrs</div>
                    <div class="edd-option" data-ref="option item" role="option" title="Ms">Ms</div>
                    <div class="edd-option" data-ref="option item" role="option" title="Miss">Miss</div>
                    <div class="edd-option" data-ref="option item" role="option" title="Doc">Doc</div>
                    <div class="edd-option" data-ref="option item" role="option" title="Rev">Rev</div>
                    <div class="edd-option" data-ref="option item" role="option" title="Prof">Prof</div>
                    <div class="edd-option" data-ref="option item" role="option" title="C/O">C/O</div>
                </div>
            </div>
            <div class="edd-gradient-top" role="presentation"></div>
            <div class="edd-gradient-bottom" role="presentation"></div>
        </div>
    </div>
</div>

added mobile version:

<div class="no-margin">
    <div class="edd-root edd-root-native" role="widget combobox" aria-haspopup="listbox">
        <div class="edd-head" data-ref="head">
            <div class="edd-value" data-ref="value"></div>
            <div class="edd-arrow" role="presentation"></div>
            <select name="title" id="title" class="edd-select" aria-hidden="true">
                <option value=""></option>
                <option selected="selected" value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Ms">Ms</option>
                <option value="Miss">Miss</option>
                <option value="Doc">Doc</option>
                <option value="Rev">Rev</option>
                <option value="Prof">Prof</option>
                <option value="C/O">C/O</option>
            </select>
        </div>
    </div>
</div>

[DonGiulio]

setting

                 useNativeUiOnMobile: false

fixed it, thanks, sorry for the noise