Merge branch 'master' of https://github.com/comicrelief/component-lib…

…rary into ENG-2834_nav_update

src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import Input from '../Input/Input';
@@ -7,7 +7,6 @@ import {
   Container,
   Dropdown,
   DropdownList,
-  DropdownItem,
   DropdownItemSelectable,
   TextItalic
 } from './TextInputWithDropdown.style';
@@ -37,16 +36,44 @@ const TextInputWithDropdown = React.forwardRef(
       label,
       dropdownInstruction = null,
       className = '',
+      hideBorder = false,
       ...otherInputProps
     },
-    ref
+    forwardedRef
   ) => {
     const [activeOption, setActiveOption] = useState(-1);
     const [forceClosed, setForceClosed] = useState(false);
+    const dropdownRef = useRef(null);
+    const containerRef = useRef(null);
+
     useEffect(() => {
-      // reset if options change
+      const handleClickOutside = event => {
+        if (dropdownRef.current
+          && !dropdownRef.current.contains(event.target)
+          && !containerRef.current.contains(event.target)) {
+          setForceClosed(true);
+        }
+      };
+
+      // Only add the listeners if we have options showing
+      if (options.length > 0 && !forceClosed) {
+        ['mousedown', 'touchstart'].forEach(event => document.addEventListener(event, handleClickOutside));
+      }
+
+      return () => {
+        ['mousedown', 'touchstart'].forEach(event => document.removeEventListener(event, handleClickOutside));
+      };
+    }, [options.length, forceClosed, onChange]);
+
+    const closeDropdown = () => {
+      setForceClosed(true);
       setActiveOption(-1);
+    };
+
+    // Reset forceClosed when options change
+    useEffect(() => {
       setForceClosed(false);
+      setActiveOption(-1);
     }, [options]);
 
     const down = () => (activeOption < options.length - 1
@@ -89,38 +116,43 @@ const TextInputWithDropdown = React.forwardRef(
       onSelect,
       dropdownInstruction,
       activeOption,
+      closeDropdown,
       resetActiveOption: () => setActiveOption(-1)
     };
 
     return (
       <Container
         className={`TextInputWithDropdown ${className}`.trim()}
         onKeyDown={navigateOptions}
+        ref={containerRef}
       >
         <Input
           {...inputProps}
           className="TextInputWithDropdown__input"
-          ref={ref}
+          ref={forwardedRef}
         />
-        {options.length > 0 && forceClosed === false && (
+        {options.length > 0 && !forceClosed && (
           <Options
             {...optionsProps}
             className="TextInputWithDropdown__options"
+            ref={dropdownRef}
+            hideBorder={hideBorder}
           />
         )}
       </Container>
     );
   }
 );
 
-const Options = ({
+const Options = React.forwardRef(({
   options,
   dropdownInstruction,
   onSelect,
   activeOption,
+  closeDropdown,
   resetActiveOption,
   ...rest
-}) => {
+}, ref) => {
   // Reset 'activeOption' when the list is unfocused.
   const onBlur = e => {
     const { target } = e;
@@ -136,16 +168,24 @@ const Options = ({
   return (
     <Dropdown {...rest}>
       <DropdownList
+        ref={ref}
         role="listbox"
         onBlur={onBlur}
         aria-activedescendant={
           activeOption > -1 ? `option-${activeOption}` : undefined
         }
       >
         {dropdownInstruction && (
-          <DropdownItem role="option">
-            <TextItalic>{dropdownInstruction}</TextItalic>
-          </DropdownItem>
+          <DropdownItemSelectable
+            id="dropdown-instruction"
+            role="option"
+            key="dropdown-instruction"
+            onClick={closeDropdown}
+          >
+            <TextItalic>
+              {dropdownInstruction}
+            </TextItalic>
+          </DropdownItemSelectable>
         )}
         {options.map((option, index) => (
           <DropdownItemSelectable
@@ -173,7 +213,7 @@ const Options = ({
       </DropdownList>
     </Dropdown>
   );
-};
+});
 
 TextInputWithDropdown.propTypes = {
   options: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -183,15 +223,20 @@ TextInputWithDropdown.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   className: PropTypes.string,
-  dropdownInstruction: PropTypes.string
+  dropdownInstruction: PropTypes.string,
+  hideBorder: PropTypes.bool
 };
 
 Options.propTypes = {
   options: PropTypes.arrayOf(PropTypes.string).isRequired,
   onSelect: PropTypes.func.isRequired,
   dropdownInstruction: PropTypes.string,
   activeOption: PropTypes.number.isRequired,
-  resetActiveOption: PropTypes.func.isRequired
+  resetActiveOption: PropTypes.func.isRequired,
+  hideBorder: PropTypes.bool,
+  closeDropdown: PropTypes.func
 };
 
+TextInputWithDropdown.displayName = 'TextInputWithDropdown';
+
 export default TextInputWithDropdown;

src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js

@@ -16,7 +16,7 @@ const Dropdown = styled.div`
   max-height: 300px;
   overflow: auto;
   background-color: ${({ theme }) => theme.color('white')};
-  border: 1px solid;
+  border: ${({ hideBorder }) => (hideBorder ? 'none' : '1px solid')};
   margin-top: -1px;
   width: 100%;
 

src/components/Molecules/SchoolLookup/SchoolLookup.js

@@ -25,6 +25,7 @@ const SchoolLookup = React.forwardRef(
       dropdownInstruction = 'Please select a school from the list below',
       notFoundMessage = "Sorry, we can't find this school",
       onSelect,
+      hideBorder = false,
       ...rest
     },
     ref
@@ -39,6 +40,7 @@ const SchoolLookup = React.forwardRef(
       placeholder,
       notFoundMessage,
       dropdownInstruction,
+      hideBorder,
       ...rest
     };
 
@@ -52,7 +54,10 @@ SchoolLookup.propTypes = {
   label: PropTypes.string,
   placeholder: PropTypes.string,
   dropdownInstruction: PropTypes.string,
-  notFoundMessage: PropTypes.string
+  notFoundMessage: PropTypes.string,
+  hideBorder: PropTypes.bool
 };
 
+SchoolLookup.displayName = 'SchoolLookup';
+
 export default SchoolLookup;