1

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) :

enter image description here

In desktop it show the values correctly:

enter image description here

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

enter image description here

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.

4

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>
  • Thanks for your reply. I don't know if it's working on iOS, but I need that it to works on Android. Also, unfortunately Chrome Devtools is not working after Summer 20' release :(, the site changes to classic: trailblazer.salesforce.com/ideaView?id=0873A000000PeguQAC – Wyrncael Nov 5 '20 at 22:24
  • @Wyrncael Wow, didn't know we lost DevTools. There is an alternative approach you could take - a select field with slds CSS classes. Updated answer to help. – Coogie7 Nov 5 '20 at 22:44
  • 1
    Nice! It works, only that it opens a modal to select value in mobile instead of expanding the combobox list. That not resolve the issue but is a good workarround. If nobody else gives me other way to solve that I will select this as the answer ;). Thank you! – Wyrncael Nov 5 '20 at 23:06
  • @Wyrncael - If you can confirm that isn't an issue on iOS, you could conditionally display the combobox for iOS users and use the select workaround for Android. 99% of my end user's are iOS users, so I'd be able to at least give the good UX for the majority of my end users. – Coogie7 Nov 5 '20 at 23:13
  • 1
    I can confirm is an issue only on Android, on iOS works fine. I hope Salesforce fix that soon. Thanks again! – Wyrncael Nov 6 '20 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.