Add onBlur prop to MultiSelect (#447)

Author: nickgraz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "2.3.69",
+  "version": "2.3.70-rc.0",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {

src/components/MultiSelect/index.tsx

@@ -1,9 +1,9 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import './styles.scss';
 import IconTooltip from '../IconTooltip';
-import {IconButton, TooltipProps} from '@mui/material';
+import { IconButton, TooltipProps } from '@mui/material';
 import Icon from '../Icon/Icon';
-import PillList, {PillListItem} from '../PillList';
+import PillList, { PillListItem } from '../PillList';
 
 export type MultiSelectProps<K, V> = {
   className?: string;
@@ -22,6 +22,7 @@ export type MultiSelectProps<K, V> = {
   selectedOptions: K[];
   tooltipTitle?: TooltipProps['title'];
   disabled?: boolean;
+  onBlur?: () => void;
 };
 
 export default function MultiSelect<K, V>(props: MultiSelectProps<K, V>): JSX.Element {
@@ -50,20 +51,25 @@ export default function MultiSelect<K, V>(props: MultiSelectProps<K, V>): JSX.El
     setOpenedOptions((isOpen) => !isOpen && !disabled);
   };
 
-  const closeOptions = () => {
+  const onBlurHandler = () => {
     setOpenedOptions(false);
+    if (props.onBlur) {
+      props.onBlur();
+    }
   };
 
   const unselectedOptions = Array.from<K>(options.keys()).filter((key: K) => !selectedOptions.includes(key));
 
-  const valuesPillData = selectedOptions.map((item) => {
-    const value = options.get(item);
+  const valuesPillData = selectedOptions
+    .map((item) => {
+      const value = options.get(item);
 
-    return {
-      id: item,
-      value: value ? valueRenderer(value) : (missingValuePlaceholder || ''),
-    };
-  }).filter((data) => data.value) as PillListItem<K>[];
+      return {
+        id: item,
+        value: value ? valueRenderer(value) : missingValuePlaceholder || '',
+      };
+    })
+    .filter((data) => data.value) as PillListItem<K>[];
 
   return (
     <div className={`multi-select ${className}`}>
@@ -72,26 +78,15 @@ export default function MultiSelect<K, V>(props: MultiSelectProps<K, V>): JSX.El
           {label} {tooltipTitle && <IconTooltip title={tooltipTitle} />}
         </label>
       )}
-      <div
-        className={`multi-select__container ${fullWidth ? 'multi-select__container--fullWidth' : ''}`}
-        onBlur={closeOptions}
-        tabIndex={0}
-      >
+      <div className={`multi-select__container ${fullWidth ? 'multi-select__container--fullWidth' : ''}`} onBlur={onBlurHandler} tabIndex={0}>
         <div id={id} className={`multi-select__values${disabled ? '--disabled' : ''}`} onClick={toggleOptions}>
-          {selectedOptions.length > 0
-            ? (<PillList
-                data={valuesPillData}
-                onRemove={onRemove}
-                onClick={onPillClick}
-                className={pillListClassName}
-              />)
-            : (<p className='multi-select__placeholder-text' >{placeHolder}</p>)
-          }
+          {selectedOptions.length > 0 ? (
+            <PillList data={valuesPillData} onRemove={onRemove} onClick={onPillClick} className={pillListClassName} />
+          ) : (
+            <p className='multi-select__placeholder-text'>{placeHolder}</p>
+          )}
           <div className={'multi-select__values__icon-button'} aria-label='show-options'>
-            <Icon
-              name={openedOptions ? 'chevronUp' : 'chevronDown'}
-              className={`multi-select__values__icon-right${disabled ? '--disabled' : ''}`}
-            />
+            <Icon name={openedOptions ? 'chevronUp' : 'chevronDown'} className={`multi-select__values__icon-right${disabled ? '--disabled' : ''}`} />
           </div>
         </div>
         {options && unselectedOptions.length > 0 && openedOptions && (
@@ -101,9 +96,9 @@ export default function MultiSelect<K, V>(props: MultiSelectProps<K, V>): JSX.El
                 const optionValue = options.get(optionKey);
 
                 return (
-                  <li key={index} className='select-value' onClick={() => onAdd(optionKey)}>{
-                    optionValue ? valueRenderer(optionValue) : (missingValuePlaceholder || '')
-                  }</li>
+                  <li key={index} className='select-value' onClick={() => onAdd(optionKey)}>
+                    {optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || ''}
+                  </li>
                 );
               })}
             </ul>