From 54e39f3c87d5390fff34ff54b8ad07702f13e8eb Mon Sep 17 00:00:00 2001
From: alfredo salzillo <alfredo.salzillo@progettopa.it>
Date: Tue, 6 Aug 2019 11:58:26 +0200
Subject: [PATCH] fix(angular-editor-toolbar): Edge browser color picker not
 appearing

ISSUE: #133
The input should be visible and the input focused before click for EDGE.
---
 .../src/lib/angular-editor-toolbar.component.html      | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
index c950a4851..44e29e0c0 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
@@ -111,17 +111,19 @@
     </ae-select>
   </div>
   <div class="angular-editor-toolbar-set">
+    <!-- For work with the current EDGE version we need to show the input and to focus it before click  -->
     <input
-      style="display: none"
+      style="opacity: 0; max-width: 0; margin: 0; padding: 0; float: left"
       type="color" (change)="insertColor(fgInput.value, 'textColor')"
       #fgInput>
-    <button [id]="'foregroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="fgInput.click()" title="Text Color"
+    <button [id]="'foregroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="fgInput.focus(); fgInput.click()" title="Text Color"
             [disabled]="htmlMode" tabindex="-1"><span class="color-label foreground"><i class="fa fa-font"></i></span></button>
+    <!-- For work with the current EDGE version we need to show the input and to focus it before click  -->
     <input
-      style="display: none"
+      style="opacity: 0; max-width: 0; margin: 0; padding: 0; float: left"
       type="color" (change)="insertColor(bgInput.value, 'backgroundColor')"
       #bgInput>
-    <button [id]="'backgroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="bgInput.click()" title="Background Color"
+    <button [id]="'backgroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="bgInput.focus(); bgInput.click()" title="Background Color"
             [disabled]="htmlMode" tabindex="-1"><span class="color-label background"><i class="fa fa-font"></i></span></button>
   </div>
   <div *ngIf="customClasses" class="angular-editor-toolbar-set">