inputProps.onBlur not working on mobile

• Try out the homepage or codepen examples on mobile (iOS or Android). No issue on desktop browsers.
• Steps to reproduce:
  1. Select the component, type a character to open the dropdown suggestion list.
  2. Select any item in the dropdown; e.g. scroll the list if possible.
  3. Tap elsewhere on the page (e.g. another dropdown).
  4. Observe that the original component doesn’t “close” (dropdown still open).
• Expected behavior: The dropdown should have closed (and inputProps.onBlur event fired) when another component is selected.

[scotta-koorong]

Hey all,

The issue is that justSelectedSuggestion is set to true while you scroll and then blocks the .blur() in the onBlur function when you try and blur it afterwards. The displaying of the suggestions is not intrinsically bound to whether the suggestions are focused at the code level. So if justSelectedSuggestion is true then it can’t blur.

On mousedown sets justSelectedSuggestion to true even if you’re just scrolling. But it doesn’t properly unset.

if (!_this2.justSelectedSuggestion) {
    _this2.onBlur();
    _this2.onSuggestionsClearRequested();
}

This blocking with mousedown and not releasing is also linked to https://github.com/moroshko/react-autosuggest/issues/412

For this specific scroll event, a fix is to do this:

Look for these handlers

onMouseEnter: _this3.onSuggestionMouseEnter,
onMouseLeave: _this3.resetHighlightedSuggestionOnMouseLeave,
onMouseDown: _this3.onSuggestionMouseDown,
onTouchStart: _this3.onSuggestionMouseDown, // Because on iOS `onMouseDown` is not triggered

And add this underneath onTouchMove: _this3.onTouchMove,

Yours might look a little different as I’m just working off the dist code.

Now add this function below the this.onSuggestionMouseDown function

this.onTouchMove = function (e) {
    _this3.justSelectedSuggestion = false;      
  };

This means that moving your finger while touching will allow focus again.

However to fully fix this blur() blocking it might need some heavy changes or to catch other cases like this.

I don’t want to assume, since I haven’t been able to understand the focusing and blurring side of the code. But could aria-activedescendant be used to keep the input focused instead of justSelectedSuggestion? You can see that if you select a suggestion it unfocuses the input and then refocuses it just a moment after. This can be seen in the codepen examples by applying a colored border when focused. I know aria-activedescendant is already on it, but it doesn’t seem to be working as intended.

[aberezkin]

@moroshko Hi, can you please explain why these lines are required?

onSuggestionMouseDown = () => {
  this.justSelectedSuggestion = true;
};

Looks like they are causing the issue and it’s not iOS related.

You can reproduce it on desktop:

1. Focus input with autocomplete
2. Make mouse down on any suggestion
3. Move your mouse off the suggestion list
4. Click anywhere except the suggestion list

Suggestion list will remain on the screen and can be removed only by clicking at any suggestion because this.justSelectedSuggestion is set false only in onSuggestionClick event handler by these lines:

setTimeout(() => {
    this.justSelectedSuggestion = false;
  });

UPD: Also looks like it’s identical to #412