fix(hooks): return the ref container with isMouseDown

.size-snapshot.json

@@ -1,38 +1,38 @@
 {
   "dist/downshift.cjs.js": {
-    "bundled": 136546,
-    "minified": 62424,
-    "gzipped": 13264
+    "bundled": 136679,
+    "minified": 62445,
+    "gzipped": 13268
   },
   "preact/dist/downshift.cjs.js": {
-    "bundled": 135282,
-    "minified": 61404,
-    "gzipped": 13162
+    "bundled": 135415,
+    "minified": 61425,
+    "gzipped": 13166
   },
   "preact/dist/downshift.umd.min.js": {
-    "bundled": 146614,
-    "minified": 46647,
-    "gzipped": 12560
+    "bundled": 146749,
+    "minified": 46668,
+    "gzipped": 12564
   },
   "dist/downshift.umd.min.js": {
-    "bundled": 150808,
-    "minified": 47952,
-    "gzipped": 13114
+    "bundled": 150943,
+    "minified": 47973,
+    "gzipped": 13117
   },
   "preact/dist/downshift.umd.js": {
-    "bundled": 156768,
-    "minified": 55003,
-    "gzipped": 13886
+    "bundled": 156903,
+    "minified": 55024,
+    "gzipped": 13889
   },
   "dist/downshift.umd.js": {
-    "bundled": 186352,
-    "minified": 63928,
-    "gzipped": 16505
+    "bundled": 186487,
+    "minified": 63949,
+    "gzipped": 16507
   },
   "dist/downshift.esm.js": {
-    "bundled": 135928,
-    "minified": 61883,
-    "gzipped": 13187,
+    "bundled": 136061,
+    "minified": 61904,
+    "gzipped": 13191,
     "treeshaked": {
       "rollup": {
         "code": 2281,
@@ -44,9 +44,9 @@
     }
   },
   "preact/dist/downshift.esm.js": {
-    "bundled": 134616,
-    "minified": 60815,
-    "gzipped": 13081,
+    "bundled": 134749,
+    "minified": 60836,
+    "gzipped": 13083,
     "treeshaked": {
       "rollup": {
         "code": 2282,

cypress/integration/useSelect.js

@@ -0,0 +1,22 @@
+describe('useSelect', () => {
+  before(() => {
+    cy.visit('/')
+    cy.findByText(/^Tests$/).click()
+    cy.findByText(/^useSelect$/, {selector: '[href="/tests/use-select"]'}).click()
+  })
+
+  it('can open and close a menu', () => {
+    cy.findByTestId('select-toggle-button')
+      .click()
+    cy.findAllByRole('option')
+      .should('have.length.above', 0)
+    cy.findByTestId('select-toggle-button')
+      .click()
+    cy.findAllByRole('option')
+      .should('have.length', 0)
+    cy.findByTestId('select-toggle-button')
+      .click()
+    cy.findAllByRole('option')
+      .should('have.length.above', 0)
+  })
+})

docs/tests/useSelect.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import {useSelect} from '../../src'
+import {items, menuStyles} from '../utils'
+
+export default function DropdownSelect() {
+  const {
+    isOpen,
+    selectedItem,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex,
+    getItemProps,
+  } = useSelect({items})
+  return (
+    <div>
+      <label {...getLabelProps()}>Choose an element:</label>
+      <button data-testid='select-toggle-button' {...getToggleButtonProps()}>{selectedItem || 'Elements'}</button>
+      <ul {...getMenuProps()} style={menuStyles}>
+        {isOpen &&
+          items.map((item, index) => (
+            <li
+              style={
+                highlightedIndex === index ? {backgroundColor: '#bde4ff'} : {}
+              }
+              key={`${item}${index}`}
+              {...getItemProps({item, index})}
+            >
+              {item}
+            </li>
+          ))}
+      </ul>
+    </div>
+  )
+}

docs/tests/useSelect.mdx

@@ -0,0 +1,11 @@
+---
+name: useSelect
+route: /tests/use-select
+menu: Tests
+---
+
+import DropdownSelect from './useSelect'
+
+# Select with useSelect
+
+<DropdownSelect />

src/hooks/useCombobox/index.js

@@ -152,7 +152,7 @@ function useCombobox(userProps = {}) {
     isInitialMount.current = false
   }, [])
   /* Add mouse/touch events to document. */
-  const isMouseDown = useMouseAndTouchTracker(
+  const mouseAndTouchTrackersRef = useMouseAndTouchTracker(
     isOpen,
     [comboboxRef, menuRef, toggleButtonRef],
     environment,
@@ -235,7 +235,7 @@ function useCombobox(userProps = {}) {
   }
   const inputHandleBlur = () => {
     /* istanbul ignore else */
-    if (!isMouseDown) {
+    if (!mouseAndTouchTrackersRef.current.isMouseDown) {
       dispatch({
         type: stateChangeTypes.InputBlur,
       })

src/hooks/useSelect/index.js

@@ -189,7 +189,7 @@ function useSelect(userProps = {}) {
     isInitialMountRef.current = false
   }, [])
   /* Add mouse/touch events to document. */
-  const isMouseDown = useMouseAndTouchTracker(
+  const mouseAndTouchTrackersRef = useMouseAndTouchTracker(
     isOpen,
     [menuRef, toggleButtonRef],
     environment,
@@ -297,7 +297,7 @@ function useSelect(userProps = {}) {
       return
     }
 
-    const shouldBlur = !isMouseDown
+    const shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown
     /* istanbul ignore else */
     if (shouldBlur) {
       dispatch({type: stateChangeTypes.MenuBlur})

src/hooks/utils.js

@@ -284,7 +284,7 @@ export function getHighlightedIndexOnOpen(
  * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
  * @param {Object} environment Environment where component/hook exists.
  * @param {Function} handleBlur Handler on blur from mouse or touch.
- * @returns {boolean} Whether the mouseDown event occurred.
+ * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
  */
 export function useMouseAndTouchTracker(
   isOpen,
@@ -350,8 +350,8 @@ export function useMouseAndTouchTracker(
       environment.removeEventListener('touchmove', onTouchMove)
       environment.removeEventListener('touchend', onTouchEnd)
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, environment])
 
-  return mouseAndTouchTrackersRef.current.isMouseDown
+  return mouseAndTouchTrackersRef
 }