Color Picker shows behind HTML dialog

[ArildoDev]

If the color picker trigger is placed in a HTML dialog, the color picker panel displays behind the modal backdrop and is not usable.
Also, after closing the HTML dialog, the color picker panel persists until another action is triggered.

[ArildoDev]

After some inspection, It appears that the issue stems from the fact that the HTML dialog element when displayed using the showModal() method, is displayed as a top layer.
https://developer.mozilla.org/en-US/docs/Glossary/Top_layer
My suggestion is to either wrap the panel in a dialog element or declare it as a popover element
https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

[KroneCorylus]

Hi @ArildoDev.
You can set an ID to your dialog or any element within it, and then pass that ID to ngx-colors using the attachTo property.

[ArildoDev]

Hello again,
I tried the suggestion as follows
(the color picker is within an if statement)


and got the following error

Also, when the trigger is clicked, the panel does not show in the correct position

(it appears way to the side)
if attaching to anything inside the dialog, it will not appear at all

[ecancil]

@ArildoDev When is use attachTo, and attach it to something within a modal, it shows offset the same amount that the modal is offset from the top right of the screen. So while it is attached to that element in a z-index perspective, the coordinates are totally off