Fixing center select text on Safari

frontend/src/components/AddMember/PersonalData.js

@@ -1,13 +1,13 @@
 import {
   Input,
   ListHeader,
-  Select,
   DropdownSearch
 } from "@code4ro/taskforce-fe-components";
 import React from "react";
 import { options } from "./options";
 import PropTypes from "prop-types";
 import cities from "./cities.json";
+import SelectCentered from "../SelectCentered";
 
 export const PersonalData = ({
   userData,
@@ -100,7 +100,7 @@ export const PersonalData = ({
           }}
         />
         {isForFamilyMember && (
-          <Select
+          <SelectCentered
             placeholder="Tip de relație"
             options={selectOption(options.relation, userData.relationshipType)}
             selectProps={{
@@ -148,7 +148,7 @@ export const PersonalData = ({
             setUserDataField("age", +value);
           }}
         />
-        <Select
+        <SelectCentered
           placeholder="Gen"
           options={selectOption(options.gender, userData.gender)}
           selectProps={{

frontend/src/components/SelectCentered/index.js

@@ -0,0 +1,50 @@
+import { Select } from "@code4ro/taskforce-fe-components";
+import "./selectCentered.scss";
+
+import React from "react";
+
+const SelectCentered = ({
+  label,
+  description,
+  options,
+  selectProps,
+  defaultValue,
+  placeholder
+}) => {
+  const select = () => {
+    return (
+      <Select
+        placeholder={placeholder}
+        label={label}
+        description={description}
+        options={options}
+        selectProps={selectProps}
+        defaultValue={defaultValue}
+      />
+    );
+  };
+
+  // a bit meta I know! But IE 11 doesn't support CSS.supports
+  // however it supports text-align-last hence why when CSS.supports
+  // is not supported it does the default behaviour
+  const cssSupportsSupported = CSS ? CSS.supports : false;
+
+  if (!cssSupportsSupported) {
+    return select();
+  }
+  const textCenteredByDefault = CSS.supports("text-align-last", "center");
+
+  if (textCenteredByDefault) {
+    return select();
+  } else {
+    const selected = options.find(option => option.selected);
+    return (
+      <label className="center-select">
+        {select()}
+        <span className="text">{selected ? selected.text : placeholder}</span>
+      </label>
+    );
+  }
+};
+
+export default SelectCentered;

frontend/src/components/SelectCentered/selectCentered.scss

@@ -0,0 +1,41 @@
+.center-select,
+.center-select * {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.center-select {
+  display: block;
+  position: relative;
+
+  .field {
+    -webkit-appearance: none;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    width: 100%;
+  }
+
+  .text {
+    background-color: #fff;
+    border-radius: 5px;
+    border: 1px solid #dbdbdb;
+    color: #363636;
+    cursor: pointer;
+    pointer-events: none;
+    text-align: center;
+
+    // to center the text in the middle of the span
+    // the line height value is coming from bulma - a bit of hack!
+    // Feel free to make it better
+    display: inline-block;
+    line-height: 2.5em;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+  }
+}