lightning-combobox issue with Salesforce Mobile app in Screen Flow

Question

I have created a LWC with just a lightning-combobox and then added it to a screen flow. Here is the LWC code:

<template>
    <lightning-combobox label="Options" 
                        value={selectedOption} 
                        options={options} 
                        dropdown-alignment="left" 
                        variant="standard">
    </lightning-combobox>
</template>

And this is the very simple flow (i think this is irrelevant) :

In desktop it show the values correctly:

But in Salesforce Mobile it shows cutted off and only a few values are displayed:

I think the problem is that the screen flow sets the height of the view and the LWC can't overflow beyond, but I can't change the size of the screen. Also, the problem is solved if I add anything below the screen flow.

I have make an exaustive search about this but i didn't found any information about that. The main problem is that I can't debug Salesforce Mobile app so I neither can view styles or html to find the reason of that.

Is there a known issue about that? Any ideas to solve that?

Thank you.

EDIT:

As @Coogie7 said is an Android issue, i can confirm that on iOS works as expected. I hope Salesforce fix it soon.

Answer 1

That is likely an issue related to Salesforce on Android, rather than your development. Is it an issue on iOS? LWC in flows are still new enough that this isn't surprising.

Also, you can debug a mobile view in your browser by changing the viewport. Here is an example for Chrome: Chrome Devtools. Correction, since Summer 20' release, Chrome DevTools will switch back to Classic when you attempt this. Here is the Idea to bring it back.

You could switch to a simple SELECT box and apply the "slds-select" CSS class.

Example:

<div class="slds-form-element">
<label class="slds-form-element__label">
    <span class="">Combobox Example</span>
</label>
<div class="slds-form-element__control slds-grow">
    <div class="slds-select_container slds-show_inline-block">
        <select name="My Select Box" class="slds-select"
            onchange={handleSelect}>
            <template for:each={comboOptions} for:item="v">
                <option value={v.value} key={v.value}>{v.label}</option>
            </template>
        </select>
    </div>
</div>