fix: use mousemove to focus suggestion

.changeset/dry-phones-explode.md

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

.changeset/twelve-drinks-wink.md

@@ -0,0 +1,5 @@
+---
+"react-mentions": patch
+---
+
+forward refs for wrapped style components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mentions",
-  "version": "4.4.7",
+  "version": "4.5.8",
   "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)
     }
   }
 

src/utils/defaultStyle.js

@@ -3,21 +3,21 @@ import useStyles from 'substyle'
 
 function createDefaultStyle(defaultStyle, getModifiers) {
   const enhance = (ComponentToWrap) => {
-    const DefaultStyleEnhancer = ({
+    const DefaultStyleEnhancer = React.forwardRef(({
       style,
       className,
       classNames,
       ...rest
-    }) => {
+    }, forwardedRef) => {
       const modifiers = getModifiers ? getModifiers(rest) : undefined
       const styles = useStyles(
         defaultStyle,
         { style, className, classNames },
         modifiers
       )
 
-      return <ComponentToWrap {...rest} style={styles} />
-    }
+      return <ComponentToWrap {...rest} ref={forwardedRef} style={styles} />
+    })
     const displayName =
       ComponentToWrap.displayName || ComponentToWrap.name || 'Component'
     DefaultStyleEnhancer.displayName = `defaultStyle(${displayName})`