Merge pull request #18 from maxkordiyak/remove-modal

Don't lose input focus when typing

Author: docker-run

components/Autocomplete/index.js

@@ -69,8 +69,8 @@ class Autocomplete extends Component {
         } else {
           this.setState({items: [NO_DATA], loading: false});
         }
-        if (this.dropdown) {
-          this.dropdown.onPress(this.container);
+        if (this.dropdown.current) {
+          this.dropdown.current.onPress(this.container);
         }
       } catch (error) {
         throw new Error(error);
@@ -83,8 +83,8 @@ class Autocomplete extends Component {
         } else {
           this.setState({items: [NO_DATA], loading: false});
         }
-        if (this.dropdown) {
-          this.dropdown.onPress(this.container);
+        if (this.dropdown.current) {
+          this.dropdown.current.onPress(this.container);
         }
       } catch (error) {
         throw new Error(error);
@@ -110,8 +110,8 @@ class Autocomplete extends Component {
         });
       }
 
-      if (this.dropdown) {
-        this.dropdown.onPress(this.container);
+      if (this.dropdown.current) {
+        this.dropdown.current.onPress(this.container);
       }
     }
   }
@@ -144,6 +144,9 @@ class Autocomplete extends Component {
   handleBlur() {
     clearTimeout(this.timer);
     this.setState({loading: false});
+    if (this.dropdown.current) {
+      this.dropdown.current.close();
+    }
   }
 
   render() {
@@ -195,9 +198,7 @@ class Autocomplete extends Component {
         </View>
         {items && items.length > 0 && (
           <Dropdown
-            ref={ref => {
-              this.dropdown = ref;
-            }}
+            ref={this.dropdown}
             dropdownPosition={0}
             data={data ? filteredItems : items}
             listHeader={listHeader}

components/Dropdown/Dropdown.styles.js

@@ -34,7 +34,6 @@ export default StyleSheet.create({
   picker: {
     backgroundColor: "rgba(255, 255, 255, 1.0)",
     borderRadius: 2,
-    position: "absolute",
     ...Platform.select({
       ios: {
         shadowRadius: 2,

components/Dropdown/index.js

@@ -2,8 +2,6 @@ import React, {PureComponent} from "react";
 import {
   View,
   Animated,
-  Modal,
-  TouchableOpacity,
   Dimensions,
   Platform,
   FlatList,
@@ -161,6 +159,20 @@ export default class Dropdown extends PureComponent {
     });
   }
 
+  close() {
+    const {onBlur, onDropdownClose} = this.props;
+
+    if (typeof onBlur === "function") {
+      onBlur();
+    }
+    if (typeof onDropdownClose === "function") {
+      onDropdownClose();
+    }
+    if (this.mounted) {
+      this.setState({modal: false});
+    }
+  }
+
   onClose(val) {
     const {onBlur, onDropdownClose} = this.props;
     const {value} = this.state;
@@ -474,7 +486,6 @@ export default class Dropdown extends PureComponent {
     const pickerStyle = {
       width,
       height,
-      top,
       left,
       transform: [{translateY}],
     };
@@ -483,32 +494,22 @@ export default class Dropdown extends PureComponent {
 
     return (
       <View onLayout={this.onLayout} style={containerStyle}>
-        <Modal
-          visible={modal}
-          transparent
-          onRequestClose={this.blur}
-          supportedOrientations={supportedOrientations}
-        >
-          <TouchableOpacity
-            onPress={this.blur}
-            style={[styles.overlay, overlayStyleOverrides]}
-          >
-            <View style={[styles.picker, pickerStyle, pickerStyleOverrides]}>
-              <FlatList
-                keyboardShouldPersistTaps="always"
-                ref={this.updateScrollRef}
-                data={itemData}
-                style={[styles.scroll, scrollStyle]}
-                renderItem={this.renderItem}
-                keyExtractor={this.keyExtractor}
-                scrollEnabled={visibleItemCount <= itemCount}
-                ItemSeparatorComponent={this.renderSeparator}
-                ListFooterComponent={this.renderFooter}
-                ListHeaderComponent={this.renderHeader}
-              />
-            </View>
-          </TouchableOpacity>
-        </Modal>
+        {modal && (
+          <View style={[styles.picker, pickerStyle, pickerStyleOverrides]}>
+            <FlatList
+              keyboardShouldPersistTaps="always"
+              ref={this.updateScrollRef}
+              data={itemData}
+              style={[styles.scroll, scrollStyle]}
+              renderItem={this.renderItem}
+              keyExtractor={this.keyExtractor}
+              scrollEnabled={visibleItemCount <= itemCount}
+              ItemSeparatorComponent={this.renderSeparator}
+              ListFooterComponent={this.renderFooter}
+              ListHeaderComponent={this.renderHeader}
+            />
+          </View>
+        )}
       </View>
     );
   }

components/DropdownItem/index.js

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React, {PureComponent} from "react";
+import {Keyboard} from 'react-native';
 import {Button} from "react-native-material-buttons";
 import styles from "./DropdownItem.styles";
 import {theme} from "../../constants/Theme";
@@ -31,6 +32,7 @@ export default class DropdownItem extends PureComponent {
 
     if (typeof onPress === "function") {
       onPress(index);
+      Keyboard.dismiss();
     }
   }