Goal picker fix for IE 11

IE 11 doesn't place flex items properly when a `min-height` is used. Add a flag to the multiselect component allowing flagging it as a "single row" input to allow the goal picker to show up properly
HHS · Mar 10, 2021 · 72ea701 · 72ea701
1 parent a270329
commit 72ea701
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 39 deletions.
diff --git a/frontend/src/components/MultiSelect.js b/frontend/src/components/MultiSelect.js
@@ -34,43 +34,6 @@ const DropdownIndicator = (props) => (
   </components.DropdownIndicator>
 );
 
-const styles = {
-  container: (provided, state) => {
-    // To match the focus indicator provided by uswds
-    const outline = state.isFocused ? '0.25rem solid #2491ff;' : '';
-    return {
-      ...provided,
-      outline,
-    };
-  },
-  groupHeading: (provided) => ({
-    ...provided,
-    fontWeight: 'bold',
-    fontFamily: 'SourceSansPro',
-    textTransform: 'capitalize',
-    fontSize: '14px',
-    color: '#21272d',
-    lineHeight: '22px',
-  }),
-  control: (provided, state) => ({
-    ...provided,
-    borderColor: '#565c65',
-    backgroundColor: 'white',
-    borderRadius: '0',
-    '&:hover': {
-      borderColor: '#565c65',
-    },
-    // Match uswds disabled style
-    opacity: state.isDisabled ? '0.7' : '1',
-  }),
-  indicatorsContainer: (provided) => ({
-    ...provided,
-    // The arrow dropdown icon is too far to the right, this pushes it back to the left
-    marginRight: '4px',
-  }),
-  indicatorSeparator: () => ({ display: 'none' }),
-};
-
 function MultiSelect({
   name,
   options,
@@ -83,8 +46,47 @@ function MultiSelect({
   rules,
   multiSelectOptions,
   onItemSelected,
+  singleRowInput,
   components: componentReplacements,
 }) {
+  const styles = {
+    container: (provided, state) => {
+      // To match the focus indicator provided by uswds
+      const outline = state.isFocused ? '0.25rem solid #2491ff;' : '';
+      return {
+        ...provided,
+        outline,
+      };
+    },
+    groupHeading: (provided) => ({
+      ...provided,
+      fontWeight: 'bold',
+      fontFamily: 'SourceSansPro',
+      textTransform: 'capitalize',
+      fontSize: '14px',
+      color: '#21272d',
+      lineHeight: '22px',
+    }),
+    control: (provided, state) => ({
+      height: singleRowInput ? '38px' : '',
+      ...provided,
+      borderColor: '#565c65',
+      backgroundColor: 'white',
+      borderRadius: '0',
+      '&:hover': {
+        borderColor: '#565c65',
+      },
+      // Match uswds disabled style
+      opacity: state.isDisabled ? '0.7' : '1',
+    }),
+    indicatorsContainer: (provided) => ({
+      ...provided,
+      // The arrow dropdown icon is too far to the right, this pushes it back to the left
+      marginRight: '4px',
+    }),
+    indicatorSeparator: () => ({ display: 'none' }),
+  };
+
   /*
    * @param {Array<string> || Array<object>} - value array. Either an array of strings or array
    * of objects
@@ -196,6 +198,7 @@ MultiSelect.propTypes = {
   control: PropTypes.object.isRequired,
   components: PropTypes.shape({}),
   onItemSelected: PropTypes.func,
+  singleRowInput: PropTypes.bool,
   multiSelectOptions: PropTypes.shape({
     isClearable: PropTypes.bool,
     closeMenuOnSelect: PropTypes.bool,
@@ -209,6 +212,7 @@ MultiSelect.propTypes = {
 
 MultiSelect.defaultProps = {
   disabled: false,
+  singleRowInput: false,
   required: 'Please select at least one item',
   simple: true,
   labelProperty: 'label',

diff --git a/frontend/src/pages/ActivityReport/Pages/components/GoalInput.js b/frontend/src/pages/ActivityReport/Pages/components/GoalInput.js
@@ -46,7 +46,7 @@ const Input = ({
   }
 
   return (
-    <div css={getStyles('input', { theme, ...props })}>
+    <>
       <AutosizeInput
         className={cx({ input: true }, className)}
         inputRef={innerRef}
@@ -55,7 +55,7 @@ const Input = ({
         {...props}
       />
       {message}
-    </div>
+    </>
   );
 };
 

diff --git a/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js b/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js
@@ -98,6 +98,7 @@ const GoalPicker = ({
               validate: validateGoals,
             }}
             options={uniqueAvailableGoals.map((goal) => ({ value: goal.id, label: goal.name }))}
+            singleRowInput
             multiSelectOptions={{
               isClearable: false,
               closeMenuOnSelect: true,