fix(select): trata placeholder quando é Safari

Author: felipepetuco

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>{{ 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] }}

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;
 

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;