Suggestion box breaks when more than 4 characters matching

[davide-scalzo]

When more than x characters are used in the matching string, all the interactions in the suggestion box break:

• Can't select,
• Cant't scroll
  etc..

I "only" have 430 items in the autocomplete list, shouldn't be enough to break them?

[nulrich]

I think MLPAutoCompleteTextField can handle much more :-)

Can you share the properties you are using and the version of react-native. Thanks

[alfondotnet]

Same here, and I haven't had time to look further though I will try.
I encounter the issue easily by writing something, deleting everything and writing again,

onTyping gets called, the filter works good, a new state is generated thus a re-render is performed but the new suggestions don't show.

I am running:
"react-native": "^0.11.0",
"react-native-autocomplete": "0.1.0",

And this is my test component:

<AutoComplete
                onTyping={this.onTyping}
                onSelect={(e) => this.props.itemSelected(e) }
                onBlur={() => { console.log('BLURRRRRRRR'); }}
                onFocus={() => {}}

                suggestions={this.state.data}

                placeholder='hello!'
                style={styles.autocomplete}
                clearButtonMode='always'
                returnKeyType='go'
                textAlign='center'
                clearTextOnFocus={true}

                maximumNumberOfAutoCompleteRows={3}
                applyBoldEffectToAutoCompleteSuggestions={true}
                reverseAutoCompleteSuggestionsBoldEffect={true}
                showTextFieldDropShadowWhenAutoCompleteTableIsOpen={false}
                disableAutoCompleteTableUserInteractionWhileFetching={true}
                autoCompleteTableViewHidden={false}

                autoCompleteTableBorderColor='lightblue'
                autoCompleteTableBackgroundColor='azure'
                autoCompleteTableCornerRadius={10}
                autoCompleteTableBorderWidth={1}

                autoCompleteRowHeight={35}

                autoCompleteFontSize={15}
                autoCompleteRegularFontName='Helvetica Neue'
                autoCompleteBoldFontName='Helvetica Bold'
            />

[nulrich]

It comes from the option disableAutoCompleteTableUserInteractionWhileFetching. It needs that becomeFirstResponder works properly and since React 0.11 something has changed.

I'm studying https://github.com/facebook/react-native/blob/master/Libraries/Text/RCTTextField.m to see how to handle this. (any help from a real IOS dev is welcome!)

[nulrich]

I decided to remove the option because it was still failing "sometimes". This, because of the asynchronous usage of the IOS component.

[alfondotnet]

So is it fixed?, the problem persists for me

[nulrich]

Did you moved to the 1.1 version?

I built a fresh test application. It works on 1.1 and fails on 1.0.

[alfondotnet]

Yep,

"react-native-autocomplete": "0.1.1",

and from RCTAutoComplete.m

// From AutoCompleteView.m
RCT_EXPORT_VIEW_PROPERTY(suggestions, NSArray)
RCT_EXPORT_VIEW_PROPERTY(maximumNumberOfAutoCompleteRows, NSInteger)
RCT_EXPORT_VIEW_PROPERTY(applyBoldEffectToAutoCompleteSuggestions, BOOL)
RCT_EXPORT_VIEW_PROPERTY(reverseAutoCompleteSuggestionsBoldEffect, BOOL)
RCT_EXPORT_VIEW_PROPERTY(showTextFieldDropShadowWhenAutoCompleteTableIsOpen,    BOOL);
RCT_EXPORT_VIEW_PROPERTY(autoCompleteTableViewHidden, BOOL);

RCT_EXPORT_VIEW_PROPERTY(autoCompleteTableBorderColor, UIColor);

Yet my problem is (with my one-single-element test), I type a letter that is present and the suggestion box shows up, and if I delete the letter and type it again it doesn't show up, I have to type first a letter that it is present and then again the suggestions box shows up with the correct letter.