Dynamix Select Option Not Working Correctly Only On Mobile

[TomY]

Hi All,

I am having an issue with using the dynamic select options displaying correctly on mobile, specifically on an iPhone at the moment, with any browser I try (safari & chrome incl.) - however, on desktop it works perfect as it should.

I am using a select to display a list of country names with the values being their ISO2 codes. This works fine, and displays on both mobile and desktop. However, as part of the requirements for my project, I need to have a country (United Kingdom at the moment), separated at the top of the list for easy accessibility as this is used most.

On desktop it displays how it should, with United Kingdom at the top, then the full country list below. On mobile, it displays the full country list twice instead of the UK at the top. To achieve this, I am using dmx-bind:value, as well as dmx-show. I am aware after some quick searching that there was a bug with this back in 2018, but I didn't think this was a standing issue. Any help would be greatly appreciated. (And yes I am aware I could hard code it, but almost nothing is hardcoded on this site to allow for easy changes to be made from a database instead of re-publishing for small text changes in the future.) Code is below.

<div class="col-md col-12">
  <div class="row align-items-center mb-2 justify-content-center">
   <div class="col-auto col-12 text-danger mb-2">
    <small id="bs5-form-group-help42" class="form-text text-muted">{{LanguagePack.data.LPArray_SmallText.Country[0].value}}</small>*
    <select id="NKCountryCode" class="form-select form-control" name="NKCountryCode" style="text-align: left;" dmx-bind:options="CountryCodeAPI.data.CountryCode_api.data.value" optiontext="$value.countryname" optionvalue="$value.iso2" required="" dmx-bind:data-msg-required="LanguagePack.data.LPArray_Error.CountryReqMsg[0].value" dmx-bind:data-msg-pattern="LanguagePack.data.LPArray_Error.InvalidCountryMsg[0].value" dmx-bind:value="postCodeFormatted.data.api.data.country">
       <option value="">{{LanguagePack.data.LPArray_Placeholder.CountrySelect[0].value}}</option>
       <option value="" disabled="true">---</option>
       <option dmx-repeat="CountryCodeAPI.data.CountryCode_api.data.value" dmx-bind:value="$value.iso2" dmx-show="$value.iso2 == 'GB'">{{$value.countryname}}</option>
       <option value="" disabled="true">---</option>
    </select>
   </div>
  </div>
</div>

Any help is hugely appreciated! Thanks in advance!

[Teodor]

This isn’t correct:

@TomY

  <option dmx-repeat="CountryCodeAPI.data.CountryCode_api.data.value" dmx-bind:value="$value.iso2" dmx-show="$value.iso2 == 'GB'">{{$value.countryname}}</option>
                                          

You can’t use a second repeat nested in the select component. If you want to show a static value, just add it as a static option.

[TomY]

Thanks for a quick reply @Teodor

So this won't be a static value, hence there is logic to take the value from a list. Currently I have left the '== 'GB' ' as hardcoded, but this will also be a dynamic value from an external language pack/ from a future feature and take it from detected location or something.

I built this code a couple of months ago, and it has come up in testing pon an actual mobile device, as it isn't detected by chrome or wappler's emulators.

The reason for using a repeat is to let the element use this as an option outside of the built in value and text functions on wappler's UI.

If this is bad practise, is there a way I can achieve my goal another way?

[TomY]

Just in case anyone was interested in how I've worked around this:

As @Teodor rightly mentioned, I shouldn't have been nesting a repeat inside the or element. So instead, I simply find the values I want to show in a server action, set two variables on the front-end page containing the values from the server action.

All the variables/ values can see allow for future development or changes to be made from a language pack instead of changing hard-coded text.

Server Action:

Front End Variables:

<dmx-serverconnect id="CountryCodeAPI" url="/api/CountryCode" dmx-on:error="notifies1.danger(lastError.message)" dmx-param:getcountrycode="CountryCode.value"></dmx-serverconnect>
<dmx-value id="countryOptionName" dmx-bind:value="CountryCodeAPI.data.CountryName"> </dmx-value>
<dmx-value id="countryOptionISOValue" dmx-bind:value="CountryCodeAPI.data.CountryISO2"> </dmx-value> 

Front End Select Element:

<select id="NKCountryCode" class="form-select form-control" name="NKCountryCode" style="text-align: left;" dmx-bind:options="CountryCodeAPI.data.CountryCode_api.data.value" optiontext="$value.countryname" optionvalue="$value.iso2" required="" dmx-bind:data-msg-required="LanguagePack.data.LPArray_Error.CountryReqMsg[0].value" dmx-bind:data-msg-pattern="LanguagePack.data.LPArray_Error.InvalidCountryMsg[0].value" dmx-bind:value="postCodeFormatted.data.api.data.country">
    <option value="">{{LanguagePack.data.LPArray_Placeholder.CountrySelect[0].value}}</option>
    <option value="">---</option>
    <option dmx-bind:value="countryOptionISOValue.value">{{countryOptionName.value}}</option>
    <option value="">---</option>
</select>

I hope this can help anyone in the future encountering a similar issue.

Thanks all!