From 5fc35931189aa102bb127b704ee536ba40e018a9 Mon Sep 17 00:00:00 2001
From: Felipe Melo <felipe.petuco@gmail.com>
Date: Fri, 17 Nov 2023 11:22:15 -0300
Subject: [PATCH] =?UTF-8?q?fix(select):=20trata=20placeholder=20quando=20?=
 =?UTF-8?q?=C3=A9=20Safari?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../po-select/po-select.component.html        | 30 +++++++++++--------
 .../po-field/po-select/po-select.component.ts | 23 +++++++++++++-
 projects/ui/src/lib/utils/util.ts             |  7 +++++
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/projects/ui/src/lib/components/po-field/po-select/po-select.component.html b/projects/ui/src/lib/components/po-field/po-select/po-select.component.html
index 59d2fb0aad..0100c44f8f 100644
--- a/projects/ui/src/lib/components/po-field/po-select/po-select.component.html
+++ b/projects/ui/src/lib/components/po-field/po-select/po-select.component.html
@@ -17,19 +17,23 @@
       [required]="required"
       (change)="onSelectChange($event.target.value)"
     >
-      <option
-        *ngIf="!selectedValue?.toString() || !!placeholder"
-        [disabled]="!!placeholder"
-        [hidden]="!selectedValue?.toString() && !placeholder"
-        [selected]="!selectedValue?.toString()"
-        [value]="placeholder ?? ''"
-      >
-        {{ placeholder }}
-      </option>
-      <!-- necessário manter essa option para uso do select com ReactiveForms -->
-      <option [hidden]="true">
-        {{ displayValue }}
-      </option>
+      <ng-container *ngIf="!isSafari">
+        <option
+          *ngIf="!selectedValue?.toString() || !!placeholder"
+          [disabled]="!!placeholder"
+          [hidden]="!selectedValue?.toString() && !placeholder"
+          [selected]="!selectedValue?.toString()"
+          [value]="placeholder ?? ''"
+        >
+          {{ placeholder }}
+        </option>
+        <option [hidden]="true">{{ displayValue }}</option>
+      </ng-container>
+
+      <ng-container *ngIf="isSafari">
+        <option disabled="true" *ngIf="isSafari">{{ displayValue || placeholder }}</option>
+      </ng-container>
+
       <ng-container *ngIf="optionWithoutGroup.length > 0">
         <option *ngFor="let item of optionWithoutGroup" [disabled]="readonly" [value]="item?.[this.fieldValue]">
           {{ item?.[this.fieldLabel] }}
diff --git a/projects/ui/src/lib/components/po-field/po-select/po-select.component.ts b/projects/ui/src/lib/components/po-field/po-select/po-select.component.ts
index 83693553f3..a333681eb3 100644
--- a/projects/ui/src/lib/components/po-field/po-select/po-select.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-select/po-select.component.ts
@@ -16,6 +16,7 @@ import { AbstractControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/form
 
 import {
   convertToBoolean,
+  isSafari,
   removeDuplicatedOptions,
   removeUndefinedAndNullOptions,
   uuid,
@@ -128,6 +129,7 @@ export class PoSelectComponent extends PoFieldValidateModel<any> implements OnCh
   optionsDefault = [];
   listGroupOptions = [];
   optionWithoutGroup = [];
+  isSafari: boolean = isSafari();
 
   protected onModelTouched: any;
 
@@ -287,7 +289,14 @@ export class PoSelectComponent extends PoFieldValidateModel<any> implements OnCh
       const optionFound: any = this.findOptionValue(value);
 
       if (optionFound) {
-        this.updateValues(optionFound);
+        if (!isSafari()) {
+          this.updateValues(optionFound);
+        } else {
+          this.selectElement.nativeElement.querySelector('option').disabled = false;
+
+          this.updateValues(optionFound);
+          this.disableDisplayValue();
+        }
       }
     }
   }
@@ -328,6 +337,18 @@ export class PoSelectComponent extends PoFieldValidateModel<any> implements OnCh
     this.changeDetector.detectChanges();
   }
 
+  disableDisplayValue() {
+    if (!this.selectElement.nativeElement.querySelector('option').disabled) {
+      setTimeout(() => {
+        this.selectElement.nativeElement.querySelector('option').disabled = true;
+      }, 30);
+    }
+  }
+
+  ngAfterContentChecked() {
+    if (isSafari) this.disableDisplayValue();
+  }
+
   extraValidation(c: AbstractControl): { [key: string]: any } {
     return null;
   }
diff --git a/projects/ui/src/lib/utils/util.ts b/projects/ui/src/lib/utils/util.ts
index 49cb2ee40d..e1a635071b 100644
--- a/projects/ui/src/lib/utils/util.ts
+++ b/projects/ui/src/lib/utils/util.ts
@@ -233,6 +233,13 @@ export function isFirefox() {
   return userAgent.toLowerCase().indexOf('firefox') > -1;
 }
 
+// Verifica se o navegador em que está sendo usado é Safari
+export function isSafari() {
+  const userAgent = window.navigator.userAgent;
+
+  return /^(?!.*chrome).*safari.*$/.test(userAgent.toLocaleLowerCase());
+}
+
 // Verifica qual o dispositivo que está sendo usado
 export function isMobile() {
   const userAgent = window.navigator.userAgent;