From 351ff8433de0b48ae66b55333107684c2a4ed8cd Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Tue, 9 May 2023 12:41:09 -0400
Subject: [PATCH] make safari act a bit more like other browsers by adding a
 blank option w/ jasquat

---
 .../carbon/SelectWidget/SelectWidget.tsx      | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx b/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx
index 102041450..436b301e6 100644
--- a/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx
@@ -19,7 +19,8 @@ function SelectWidget({
   placeholder,
   rawErrors = [],
 }: WidgetProps) {
-  const { enumOptions, enumDisabled } = options;
+  const { enumOptions } = options;
+  let { enumDisabled } = options;
 
   const emptyValue = multiple ? [] : '';
 
@@ -57,11 +58,33 @@ function SelectWidget({
   }
 
   // ok. so in safari, the select widget showed the first option, whereas in chrome it forced you to select an option.
-  // this change causes chrome to also show the first option. now all browsers are consistent on our site. you no longer have to select anything.
-  // setting the value prop causes it to show the first option.
-  // calling onChange actually gets it set in the form data.
-  if (enumOptions && enumOptions[0].value !== '') {
-    enumOptions.unshift({ value: '', label: '' });
+  // this change causes causes safari to act a little bit more like chrome, but it's different because we are actually adding
+  // an element to the dropdown.
+  //
+  // https://stackoverflow.com/a/7944490/6090676 safari detection
+  let isSafari = false;
+  const ua = navigator.userAgent.toLowerCase();
+  if (ua.indexOf('safari') != -1) {
+    if (ua.indexOf('chrome') === -1) {
+      isSafari = true;
+    }
+  }
+
+  if (isSafari) {
+    if (enumOptions && enumOptions[0].value !== '') {
+      enumOptions.unshift({
+        value: '',
+        label: '',
+      });
+    }
+    // enumDisabled is a list of values for which the option should be disabled.
+    // we don't really want users to select the fake empty option we are creating here.
+    // they cannot select it in chrome, after all.
+    // google is always right. https://news.ycombinator.com/item?id=35862041
+    if (enumDisabled === undefined) {
+      enumDisabled = [];
+    }
+    enumDisabled.push('');
   }
 
   // maybe use placeholder somehow. it was previously jammed into the helperText field,