fix(select): trata placeholder quando é Safari

po-ui · Dec 15, 2023 · 5fc3593 · 5fc3593
1 parent 4607209
commit 5fc3593
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 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
@@ -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
@@ -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
@@ -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;