Color picker does not work with Safari

[noorix1]

Hi,

I tried the demo verison hosted on https://angular-editor-wysiwyg.stackblitz.io/ and in my own project, but the color picker doesn't work in Safari, possibly because html5 color picker is not supported there. Is there a way to plugin a simple custom color picker so it's cross browser compatible?

[ctomczyk]

Just a note that in Safari version 15.4 (17613.1.17.1.13) input type color works fine. It can be verified by going to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

[maxbauer]

Using Safari 15.5 no color picker opens. The console just prints out: blur [object FocusEvent] onBlur — app.component.ts:96

[maxbauer]

Update: the color picker works of course in Safari but not within this editor.

The problem is, that the input element has the style property display:none. It seems that Safari ignores the event because the element is not visible anyway.

I quickly tested it with visibility:hidden this works, but then we have a empty space next to the button and the picker does not appear directly under the font color button.

@kolkov is it possible to address this bug in the next release?

[stevenkellner]

I found a quick workaround to set 'visibility: hidden' instead of 'display:none'.

Just add in your .component.sass file where you use the angular-editor component:

::ng-deep :has(+ #foregroundColorPicker-), ::ng-deep :has(+ #backgroundColorPicker-)
  display: inline !important
  position: absolute
  visibility: hidden

If you use multiple editors with ids, you have to add the id to the selector: e.g. ::ng-deep :has(+ #foregroundColorPicker-id_1).