Giters

downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

Home Page:http://downshift-js.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useComboBox always grabbing focus on render

FredrikMWold opened this issue · comments

commented
  • downshift version: 8.3.2
  • node version: v18.19.0
  • npm (or yarn) version: 10.2.3

Relevant code or config

  useEffect(() => {
    if (isInitialMount) {
      return
    }

    previousResultCountRef.current = items.length
  })
  // Focus the toggle button on first render if required.
  useEffect(() => {
    const focusOnOpen = getInitialValue(props, 'isOpen')
    if (focusOnOpen && toggleButtonRef.current) {
      toggleButtonRef.current.focus()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

What you did:

What happened: Since useRef returns an object the if statment will always be true

Reproduction repository:

Problem description: When rendered the component always grabs focus

Suggested solution: if (isInitialMount) -> if (isInitialMount.current)

commented

Agreed, this is a problem for me too. Certainly looks to be attributable to the 8.3.1 -> 8.3.2 update.

commented

This is also bugged on useSelect, we updated our dropdown to use Downshift 8.3.2 and now it focuses the last dropdown on the page (and scrolls it into view): https://sparkui.vercel.app/?path=/docs/components-dropdown--docs

Enregistrement.de.l.ecran.2024-02-29.a.17.34.50.mov
commented
commented

🎉 This issue has been resolved in version 8.3.3 🎉

The release is available on:

Your semantic-release bot 📦🚀