inputProps.onBlur not working on mobile

[jpap]

• 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.

[moroshko]

This is a known issue.
Previous attempts to fix this here.
PR is welcome!

[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 #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.

[YingyuWu]

Having the same issue, looking for help

[emilbjorling]

Hi,

I've been digging a little bit into this and have a question. Where the items props are defined a onTouchStart event is defined with the comment:

onTouchStart: this.onSuggestionMouseDown, // Because on iOS 'onMouseDown' is not triggered

From what I've experienced this is just partly true. If the item is indicating it is clickable (for example has the style cursor: pointer;) the ordinary click events will be triggered on iOS devices. The problem now is that the touchstart event is triggered even if the user is just scrolling (not selecting an item) which will set the state and prevent the onBlur function being called correctly.

So, a solution to this is to remove the onTouchStart event from the itemProps and recommend (hardcode?) that the item should be indicating it is clickable (for example by adding the style cursor: pointer). Is this an acceptable solution @moroshko?

[S-Cardenas]

Any update on this? It's also a huge blocker for me and I have no way of getting around it on mobile.

[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