Input type "disabled" blends input value into background color in Safari

[margusha]

Thanks for helping make Paste better! Note: For urgent requests, reach out at #help-design-system

Describe the bug
Paste documentation outlines the usage of input with disabled state. In the examples it shows visible value as it is defined in placeholder. When, instead value attribute is used for showing disabled input content, its color blends into background color in safari.

To Reproduce
Steps to reproduce the behavior:

1. create an new paste project
2. Use input component with disabled=true and specify value attribute with random content
3. Check in Safari - the input is invisible, but selectable

Expected behavior
Input value is visible, e.g. uses some other color

Screenshots
Disabled Input component using value attribute to show input content

disabled input component when selection is highlighted:

Desktop (please complete the following information):

• OSX
• Safari
• All versions

Additional context
Alternatively if the placeholder is desired approach, should hidden input be used instead to store the value? Quite often you would still expect to get the input value event hough its disabled.

[richbachman]

Hi @margusha. Thanks for reaching out about this issue. We'll look into it, and get back to you as soon as possible.

[richbachman]

Hi @margusha I've looked into this one further, and I think I found a solution. I've created a ticket in our backlog so we can get it fixed. We'll update this issue once the fix is deployed.

[TheSisb]

Hi @margusha,

Unable to repro on Safari version 14.0.3 (15610.4.3.1.7, 15610) while looking at this example on our doc site: https://paste.twilio.design/components/input#disabled-input

Can you provide your Safari version please?

[richbachman]

Hi @margusha,

We have a PR up that fixes this issue: #1408