[react-native] Button props - Cannot read property activeElement of undefined

• downshift version: 1.28.0
• node version: 8.5.0
• npm (or yarn) version: 5.6.0
• react-native version: 0.52.0
• react version: 16.2.0

Relevant code or config

What you did: Hey! tried to use the new and experimental react-native version (Thanks for that!), With Button instead of TextInput as the trigger.

What happened: Cannot read property activeElement of undefined error has thrown.

Reproduction repository: https://github.com/eyalcohen4/downshift-react-native-bug

Problem description: I think its related to the access attempt for document property of environment object, while it’s missing on react-native when I print environment.

Suggested solution: Check if we are in react-native env using isReactNative before this condition - if ( !isReactNative() && this.props.environment.document.activeElement === this.props.environment.document.body ) { event.target.focus() }

Will be happy to make a PR if it looks like the right solution. cc @kentcdodds @eliperkins

[kentcdodds]

TREVOR!!! I miss you already buddy!

This is great. I don’t think you’re doing anything wrong. If you could dig a little further to see what’s going on then we can get that error fixed.

As for an example, I’m not very into the react native world, but I think that a snack.expo.io link would be sweet 😃

[trevorwhealy]

Copied the axios example (http://downshift.netlify.com/?selectedKind=Examples&selectedStory=axios&full=0&addons=1&stories=1&panelRight=0), and found the port over to React Native to be pretty easy, but was surprised that any dropdown item I click (or anywhere I click) triggers this ActiveElement error.

Not sure what I’m doing wrong, but happy to add my basic example to the docs, because I don’t see any simple starter for a basic working setup with RN. Guessing it has to do with the ref like you mentioned above, but as far as I can tell, I’m doing everything the suggested way.

import React, { Component } from 'react';
import { TextInput, View, Text, Image } from 'react-native';

import axios from 'axios';
import Downshift from 'downshift';

const CustomInput = TextInput;
const CustomResult = View;

const RootView = ({ innerRef, ...rest }) => <View ref={innerRef} {...rest} />;

class AxiosAutocomplete extends Component {
  this.state = { items: [] };

  fetchRepository = axios.get().then(this.setState({ items }))

  render() {
    return (
      <Downshift
        render={({
          getInputProps,
          getItemProps,
          isOpen,
          getRootProps,
        }) => (
          <RootView {...getRootProps({ refKey: 'innerRef' })}>
            <CustomInput
              {...getInputProps({
                onChange: (value) => {
                  this.fetchRepository(value);
                },
              })}
            />
            {isOpen && (
              <View>
                {this.state.items.map((item, index) => (
                  <CustomResult key={index} {...getItemProps({ item })}>
                      {item}
                  </CustomResult>
                ))}
              </View>
            )}
          </RootView>
        )}
      />
    );
  }
}