Foreign column (dropdown) is as readonly styled in edit mode (i.e. different than other edit controls)

[Laurin S]

Hi,

my dropdown edit controls for the foreign key columns are differently styled, or in other words have a different background color, than the other edit controls. I noticed, that the slightly different background colors come from the "readonly" property of the dropdown controls (input element), but I don't know, where this property comes from.

See the following screenshot for the issue of different background colors between the various edit controls (dropdown of 'Ship City' has another background color than the other controls):

I've also created a little demo, that show the problem: https://stackblitz.com/edit/ccd4bf?file=index.html,index.ts

Any idea how to solve this?

[Priyanka Karthikeyan]

Hi Laurin S,

 

We have considered the reported issue "Background color is added for the dropdownlist readonly input in Tailwind theme" as a bug from our end and the fix for this issue will be included in the upcoming patch release, scheduled for the first week of October 2024.

 

Now you can track the status of the reported issue through the feedback below,

 

Feedback link:https://www.syncfusion.com/feedback/61391/background-color-is-added-for-the-dropdownlist-readonly-input-in-tailwind-theme

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

Regards,

Priyanka K

[Priyanka Karthikeyan]

Hi Laurin S,

 

We are happy to inform you that this issue "Background color is added for the dropdownlist readonly input in Tailwind theme" has been resolved in the latest version, 27.1.51. We kindly request you to upgrade your package to this version to resolve the current problem. For your convenience, you can review the release notes at the link below:

 

Release notes: https://ej2.syncfusion.com/javascript/documentation/release-notes/27.1.51?type=all#dropdownlist

 

Sample: https://stackblitz.com/edit/2ebesm-yhcnx3?file=index.html

 

Root cause: The readonly background color was previously set to match the content's background color. However, the specification did not provide a specific background color for readonly fields. After reviewing the Tailwind theme in the Figma document, We have updated the readonly background color accordingly.

 

Regards,

Priyanka K