MultiSelect ReadOnly & Disabled Items

[Scott]

When a MultiSelect is set for ReadOnly="true" the dropdown will no longer pull down, making it impossible to see everything selected.  imo, ReadOnly should still allow the dropdown to operate.  So, I tried to disable all the items in attempt to prevent changing the selections, but when an item is disabled, it's not displayed as selected even when it is selected in the Value.

[YuvanShankar Arunagiri]

Hi Scott,

We have validated your requirement regarding the MultiSelect component and the behavior of disabled selected items along with the readOnly property.

To clarify that, When the readonly property is enabled, the MultiSelect component becomes non-interactive meaning the popup cannot be opened. This is the expected behavior. And, regarding disabled items: if a value is preselected and also marked as disabled, it will appear in the popup list but will not be shown in the input element as a selected value. This is because the component treats only enabled items as valid selections, and disabled items are excluded from the selected value display.

Alternative, if your requirement is to Show selected values in the input field, Allow the popup to open for display purposes only and but prevent user interaction, then you can achieve this using a custom approach. Please refer to the code snippet and the attached sample file for implementation details.

Using the CssClass custom class, we can set the pointer event as none for the MultiSelect input and popup element, and using the dropdown icon, we can open the popup.

<SfMultiSelect TValue="string[]" CssClass="e-custom-visible" InputAttributes="InputAttr" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="multiSelectValue" ShowDropDownIcon="true">

…

private Dictionary<string, object> InputAttr = new Dictionary<string, object>

{

    {"readOnly", true}

};

…

<style>

    .e-custom-visible {

        pointer-events: none !important;

    }

 

    .e-custom-visible .e-ddl-icon {

       pointer-events: auto !important;

    }

</style>

Output screenshot:

Please let us know if you need any further assistance or clarification.

Regards,

YuvanShankar A

Attachment: Home_6bf45a1b.zip

[Scott]

While I still disagree with the functionality of ReadOnly, because you're basically disabling the control and not just making it read only, your CSS was a great help and put me on the right track.  I expanded on the CSS to make the control look "more read only"

.e-custom-readonly .e-list-item {

    pointer-events: none !important;

    background-color: gainsboro;

}

e-custom-readonly .e-list-item.e-item-focus, .e-custom-readonly .e-list-item.e-active, .e-custom-readonly .e-list-item.e-active.e-hover, .e-custom-readonly .e-list-item.e-hover {

    background-color: gainsboro !important;

    color: grey !important;

}

.e-custom-readonly .e-chips {

    pointer-events: none !important;

}

.e-custom-readonly.e-input-group .e-multi-select-wrapper {

    background-color: gainsboro;

}

[Mallesh Ravi Chandran]

When the readonly property is enabled, the MultiSelect component becomes non-interactive by design. This means the dropdown popup cannot be opened, which reflects the default behavior of the component.

Characteristics of the ReadOnly State:

• Allows user interaction such as focusing inputs.
• Prevents modification of underlying data. 
• Maintains a clean visual appearance with no gray background, aligning with native InputText behavior.

Yes , you can use CSS to further customize the appearance of the component in read-only mode. If you encounter any complexities , feel free to reach out to us.