react-mentions

react-mentions copied to clipboard

When I start typing and if mouse cursor is on the list then it jumps to that element. Do I miss something? I spent two days to debug this but unable to find anything.

Video: https://www.dropbox.com/s/pywy3blgsxlvfrc/Issue.ogv?dl=0

Thanks

Call me crazy but I don't feel comfortable downloading some video from your Dropbox :) Could you maybe create a GIF or upload that to some video sharing service?

Sure @frontendphil Here is link: https://www.screencast.com/t/4Df2fuGHu

Hey @frontendphil Have you had chance to check the issue?

Hey :) No, sorry. The new page now requires flash and I'm on a Mac :D

Cool :rofl: Linux :smile:

I will get back to my Mac and send you gif in an hour. Thanks

@frontendphil Here is GIF...

Hey @frontendphil Have you got a chance to check this?

When the SuggestionOverlay scrolls it causes the mouse to enter a new Suggestion, and the onMouseEnter of that Suggestion is called, which in turn causes the focusIndex to be set.

Maybe we could solve this by keeping track of if it was keyboard or mouse movement that caused the mouseenter event to trigger, and ignore it if it was keyboard movement.

handleKeyDown = (ev) => {
  // ...
  switch (ev.keyCode) {
    // ...
    case KEY.DOWN: {
      this._upOrDownKeyPressed = true
      this.shiftFocus(+1)
      return
    }
    case KEY.UP: {
      this._upOrDownKeyPressed = true
      this.shiftFocus(-1)
      return
    }
    // ...
  }
}

// ...

handleSuggestionsMouseMove = () => {
  this._upOrDownKeyPressed = false
}

handleSuggestionsMouseEnter = (focusIndex) => {
  // if an up or down key press triggered a scroll that in
  // turn triggered the mouseenter event we can ignore it
  if (this._upOrDownKeyPressed) {
    return
  }

  this.setState({
    focusIndex,
    scrollFocusedIntoView: false,
  })
}