1

I have a lightning-dual-listbox presented in a modal and occasionally the right-hand "selected" column does not render in Chrome or Safari as shown here:

modal

Refreshing the page generally fixes the problem.

Using the browser Developer Tools shows that the element is in the DOM but has not been recognised by the browser as a flex item indicated by the missing third flex button here:

dom not working

compared with this working example where the third flex button is present:

dom working

If you have seen this and have found a work-around let me know.

PS

Rather too much markup and code to post all of it here, but as there is aquite a lot of dynamic content:

    <lightning-dual-listbox
        if:true={modalShowTabs}
        name="cx1__Tabs__c"
        label="Tabs"
        source-label="Available"
        selected-label="Selected"
        options={tabOptions}
        value={defaultTabValues}
        onchange={handleFieldChange}
        disable-reordering="true"
        required
        size="4"
        class="slds-p-top_small slds-p-bottom_small validateable"
    ></lightning-dual-listbox>

the last (unsuccessful) attempt to solve was this:

// This is being called a lot because the right-hand "Selected" box wasn't always rendering
// and this assumes that might have been related to late arrival of async data.
// This way, the component is re-created when the modal opens.
// But hard to test and be sure as only a problem from time to time.
rerenderModalTabsField() {
    this.modalShowTabs = false;
    window.setTimeout(() => this.modalShowTabs = true, 0);
}

PPS

I see this in the failing case:

div.slds-dueling-list__column:last-child {
    display: none !important;
}

and unchecking the style fixes the problem. Will try to figure where this comes from.

5
  • haven't seen this behavior, do you have a minimal code sample of that? also, what browser and version are you using? can you reproduce in other browsers?
    – glls
    Commented Feb 16, 2022 at 17:31
  • Thanks for your comments @glls. I've posted a bit of the mark/code in the question. It is the latest version of Chrome and the org is a Spring '22 one. I'll try to repro in Safari too.
    – Keith C
    Commented Feb 16, 2022 at 17:48
  • also - out of curiosity, are you able to reproduce the behavior if you remove if:true={modalShowTabs} from the dual-listbox component
    – glls
    Commented Feb 16, 2022 at 17:53
  • Hi @glls, yes that wasn't originally there and we had the problem. And I just reproduced the problem in Safari on a Mac; navigating away into some other quite complex UI and then coming back seems to trigger the problem.
    – Keith C
    Commented Feb 16, 2022 at 18:51
  • 1
    Just drop it and use mine. Plus mine moves on a double click AND supports drag and drop. github.com/rapsacnz/OrderedListGroup Commented Feb 16, 2022 at 19:04

1 Answer 1

1

OK found the problem.

This is a code base inherited from a separate company and they saw fit to add this (wow):

div.slds-dueling-list__column:last-child {
    display: none !important;
}

to a style sheet that gets pulled in by some components as part of an effort to make part of the UI more colorful. (How this is achieved is quite convoluted and not something to copy.)

Hence when you navigate to some code that loads this custom style sheet and then come back to the component where I'm having the problem, the CSS is respected and the last column is not displayed.

3
  • hahaha, classic 3rd party implementer styling !important - glad you were able to find it
    – glls
    Commented Feb 16, 2022 at 19:27
  • Yep and not a specific selector anywhere to be seen. Thanks @glls - your comment got me looking in Safari where the different dev tool UI made this problem more visible.
    – Keith C
    Commented Feb 16, 2022 at 19:52
  • 1
    Calculated CSS properties in the browser inspector is a good way to find this sort of thing, tracing it back to origin of the CSS rules...
    – Phil W
    Commented Feb 16, 2022 at 20:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .