React-autosuggest: Keyboard dissmiss when scrolling suggestions

[AndradeB91]

Hello,
I'm using this lib in a React project and i'm trying to make the mobile native keyboard to dismiss when the user is scrolling through the suggestion container. Not sure how to do it :(

Thanks in advance,

Lucas.

[theconnectionist]

I have the exact same question. Thought of blurring when suggestions are presented, but that forces user to refocus to continue typing. That's not a smooth user experience.

Any thoughts on how to do it so user doesn't lose a third of the screen space?

[AndradeB91]

I had to fork the lib to make some adjustments.

onSuggestionTouchMove = () => {   
    this.justSelectedSuggestion = false;        
    this.pressedSuggestion = null;      
    this.input.focus();   //remove this line
};

onSuggestionTouchStart = () => {
    this.justSelectedSuggestion = true;
    this.input.blur();  //add this line
    // todo: event.preventDefault when https://github.com/facebook/react/issues/2043
    // todo: gets released so onSuggestionMouseDown won't fire in chrome
  }

Here is the link, if you wanna try: https://github.com/AndradeB91/react-autosuggest

It was the only way i managed it to work.

[tonycassara]

Also have the same question, short of using alwaysRenderSuggestions and conditionally rendering the whole component, I cannot find a way.

[tonycassara]

Figured it out!

You can set alwaysRenderSuggestions to be variable true/false. So something like this for only showing on mobile when blurred:

alwaysRenderSuggestions={this.props.isMobileDevice && this.props.shouldOpenMobileSuggestions}

And then use a button or other method of firing an action to set shouldOpenMobileSuggestions

By setting it to false it defaults to only showing suggestions on input.focus()

[hlian]

here's a monkeypatch (in case you got here through google and don't want to fork the library):

/* eslint-disable @typescript-eslint/no-explicit-any */

import Autosuggest from 'react-autosuggest';

/**
 * This class is a monkeypatch for the problems listed here:
 *
 *  https://github.com/moroshko/react-autosuggest/issues/609
 *
 * about all the problems the current onSuggestionTouchMove() has with
 * keyboards on MobileSafari.
 */
export class AutosuggestPatch extends Autosuggest {
  constructor(props: any) {
    super(props);
    const self = this as any;
    self.onSuggestionTouchMove = () => {
      self.justSelectedSuggestion = false;
      self.pressedSuggestion = null;
    };
  }

  /* monkeypatch the other method here, if you want. see @AndradeB91's comment */
}