fix: use mousemove to focus suggestion

Author: fnky

.changeset/dry-phones-explode.md

@@ -0,0 +1,5 @@
+---
+"react-mentions": minor
+---
+
+Focus suggestions on mouse move instead of mouse enter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mentions",
-  "version": "4.4.7",
+  "version": "4.5.7",
   "description": "React mentions input",
   "main": "dist/react-mentions.cjs.js",
   "module": "dist/react-mentions.esm.js",

src/MentionsInput.js

@@ -281,7 +281,7 @@ class MentionsInput extends React.Component {
         customSuggestionsContainer ={this.props.customSuggestionsContainer}
         onSelect={this.addMention}
         onMouseDown={this.handleSuggestionsMouseDown}
-        onMouseEnter={this.handleSuggestionsMouseEnter}
+        onMouseMove={this.handleSuggestionsMouseMove}
         isLoading={this.isLoading()}
         isOpened={this.isOpened()}
         ignoreAccents={this.props.ignoreAccents}
@@ -678,7 +678,7 @@ class MentionsInput extends React.Component {
     this._suggestionsMouseDown = true
   }
 
-  handleSuggestionsMouseEnter = (focusIndex) => {
+  handleSuggestionsMouseMove = (focusIndex) => {
     this.setState({
       focusIndex,
       scrollFocusedIntoView: false,

src/Suggestion.js

@@ -9,15 +9,15 @@ function Suggestion({
   ignoreAccents,
   index,
   onClick,
-  onMouseEnter,
+  onMouseMove,
   query,
   renderSuggestion,
   suggestion,
   style,
   className,
   classNames,
 }) {
-  const rest = { onClick, onMouseEnter }
+  const rest = { onClick, onMouseMove }
 
   const renderContent = () => {
     let display = getDisplay()

src/SuggestionsOverlay.js

@@ -26,7 +26,7 @@ function SuggestionsOverlay({
   style,
   customSuggestionsContainer,
   onMouseDown,
-  onMouseEnter,
+  onMouseMove,
 }) {
   const [ulElement, setUlElement] = useState()
 
@@ -85,7 +85,7 @@ function SuggestionsOverlay({
         suggestion={result}
         focused={isFocused}
         onClick={() => select(result, queryInfo)}
-        onMouseEnter={() => handleMouseEnter(index)}
+        onMouseMove={() => handleMouseMove(index)}
       />
     )
   }
@@ -98,9 +98,9 @@ function SuggestionsOverlay({
     return <LoadingIndicator style={style('loadingIndicator')} />
   }
 
-  const handleMouseEnter = (index, ev) => {
-    if (onMouseEnter) {
-      onMouseEnter(index)
+  const handleMouseMove = (index, ev) => {
+    if (onMouseMove) {
+      onMouseMove(index)
     }
   }