[Bug Report][3.7.3] v-color-picker always picks the color #FFBAF255 #20847
Comments
|
pipette icon? can you show the screenshot? I don't have any icons |
|
The pipette button should only be present on platforms that support the eyedropper api so I don't know why you've selected firefox, I also don't see it on linux chrome probably because of wayland's strict security model. |
KaelWD
added
the
S: needs reproduction
|
Tested it on Linux Mint 21.3 Cinnamon (X11 display server) on Google Chome 130.0.6723.116. Looks like there's a problem with the EyeDropper API on X11. I've created a simple demo with the native JS code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EyeDropper demo</title>
</head>
<body>
<button id="eyedropperButton">Open eyedropper</button>
<span id="eyedropperResult">Pick some color...</span>
<script>
let eyeDropper = new EyeDropper()
document.getElementById("eyedropperButton").addEventListener('click', e => {
eyeDropper.open()
.then(colorSelectionResult => {
document.getElementById('eyedropperResult').textContent = colorSelectionResult.sRGBHex
})
})
</script>
</body>
</html>When I'm picking some white cell, the result from colorSelectionResult.sRGBHex is surprisingly... rgba(255, 255, 255, 0). According to VColorPickerPreview.tsx sources, Vuetify is trying to transform this value using HexToHSV helper function, but this function is not designed to handle RGBA values, so the result is completely wrong. @KaelWD, the possible fix is to handle RGBA string values from native sRGBHex result. But of course it is not the Vuetify mistake. P.S.: EyeDropper API is not available in Firefox, so the pipette button is not visible in it. |
KaelWD
added
T: bug
|
https://issuetracker.google.com/issues/352218913 Thanks for investigating @dreamw4lker, we already have a function to parse arbitrary color formats so this is a pretty easy workaround. |
Environment
Vuetify Version: 3.7.3
Vue Version: 3.5.12
Browsers: Chrome 131.0.0.0, Mozilla Firefox
OS: Linux x86_64
Steps to reproduce
Click on the pipette icon and then select a color on the page.
Expected Behavior
Should display and store the selected color.
Actual Behavior
Displays and stores always #FFBAF255.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
The same behaviour can be seen when trying out the color pickers on the documentation page: https://vuetifyjs.com/en/components/color-pickers/
The text was updated successfully, but these errors were encountered: