display suggestions on scroll

src/components/Search.tsx

@@ -21,6 +21,7 @@ class Search extends React.PureComponent<SearchProps, SearchState> {
   };
 
   render() {
+    console.log(document.activeElement)
     const {
       type,
       onChange,

src/components/TypeAhead.tsx

@@ -8,12 +8,16 @@ import OutsideClick from "./OutsideClick";
 import OptionGroupRadio from "./OptionGroupRadio";
 
 class TypeAhead extends React.PureComponent<TypeaheadProps, TypeaheadState> {
+  typeaheadInputRef: React.RefObject<HTMLInputElement> = React.createRef();
   debouncedChange: () => void;
 
   static defaultProps: Partial<TypeaheadProps> = {
     debounceTime: 500,
     onClear: () => {},
-    searchBox: ({ registerChange, onFocus, value }, props) => (
+    searchBox: (
+      { registerChange, onFocus, value, typeaheadInputRef, onBlur },
+      props
+    ) => (
       <Input
         onChange={registerChange}
         placeholder={props.placeholder}
@@ -26,7 +30,10 @@ class TypeAhead extends React.PureComponent<TypeaheadProps, TypeaheadState> {
               registerChange("");
               props.onClear();
             }
-          }
+          },
+          //@ts-ignore
+          ref: typeaheadInputRef,
+          onBlur
         }}
         value={value}
         errorMessage={props.errorMessage}
@@ -45,7 +52,8 @@ class TypeAhead extends React.PureComponent<TypeaheadProps, TypeaheadState> {
 
   state: TypeaheadState = {
     value: this.props.initialValue || "",
-    showSuggestions: false
+    showSuggestions: false,
+    focussedElement: undefined
   };
 
   onChange = () => {
@@ -63,10 +71,15 @@ class TypeAhead extends React.PureComponent<TypeaheadProps, TypeaheadState> {
 
   private onFocus = () => {
     this.setState({
-      showSuggestions: true
+      showSuggestions: true,
+      focussedElement: document.activeElement
     });
   };
 
+  private onBlur = () => {
+    this.setState({ focussedElement: document.activeElement });
+  };
+
   private onSelect = _value => {
     this.props.onSelect(_value, this.props);
 
@@ -79,7 +92,7 @@ class TypeAhead extends React.PureComponent<TypeaheadProps, TypeaheadState> {
   render() {
     const { className, searchBox, dropdownClassName, children } = this.props;
 
-    const { showSuggestions, value } = this.state;
+    const { showSuggestions, value, focussedElement } = this.state;
 
     return (
       <OutsideClick
@@ -95,12 +108,15 @@ class TypeAhead extends React.PureComponent<TypeaheadProps, TypeaheadState> {
           {
             registerChange: this.registerChange,
             onFocus: this.onFocus,
-            value
+            onBlur: this.onBlur,
+            value,
+            typeaheadInputRef: this.typeaheadInputRef
           },
           this.props
         )}
 
-        {showSuggestions && (
+        {(focussedElement === this.typeaheadInputRef.current ||
+          showSuggestions) && (
           <div className={cx(optionsWrapper, dropdownClassName)}>
             <OptionGroupRadio onChange={this.onSelect}>
               {children}

src/components/typings/Typeahead.ts

@@ -11,6 +11,8 @@ export interface TypeaheadProps {
       registerChange: (text: string) => void;
       onFocus: FocusEvent;
       value: string;
+      typeaheadInputRef: React.RefObject<HTMLInputElement>;
+      onBlur: FocusEvent;
     },
     props: TypeaheadProps
   ) => JSX.Element;
@@ -33,4 +35,5 @@ export interface TypeaheadProps {
 export interface TypeaheadState {
   value: string;
   showSuggestions: boolean;
+  focussedElement: React.ReactNode;
 }