Single Select dropdown closes on scroll

[dankeboy36]

When I use <vscode-single-select>, the dropdown closes whenever the surrounding content scrolls.

In my app I have a terminal (xterm.js) under a toolbar. The select is in the toolbar and stays visible, but when the terminal prints new lines and scrolls, the dropdown closes.

---

The attached code is a minimal repro without xterm: it just appends lines to a div and scrolls the page. The result is the same; the dropdown closes by itself when scrolling happens.

vscode-elements-single-select-closes-on-scroll.mov

import {
  VscodeOption,
  VscodeSingleSelect,
} from '@vscode-elements/react-elements'
import { useEffect, useRef } from 'react'
import { createRoot } from 'react-dom/client'

function Repro() {
  const contentRef = useRef(/** @type {HTMLDivElement | null} */ (null))

  useEffect(() => {
    const el = contentRef.current
    if (!el) return

    // seed
    for (let i = 0; i < 30; i++) {
      const d = document.createElement('div')
      d.textContent = `line ${i + 1} — seed`
      el.appendChild(d)
    }

    const id = setInterval(() => {
      const div = document.createElement('div')
      div.textContent = `line ${el.children.length + 1} — ${new Date().toLocaleTimeString()}`
      el.appendChild(div)

      window.scrollTo({ top: document.documentElement.scrollHeight })

      const selectEl = document.getElementById('demo-select')
      const open = !!(
        selectEl &&
        (selectEl.hasAttribute('open') || selectEl.open === true)
      )
      console.log('[append]', { open })
    }, 700)
    return () => clearInterval(id)
  }, [])

  useEffect(() => {
    const el = document.getElementById('demo-select')
    if (!el) return
    const log = () =>
      console.log(
        '[select] open =',
        el.hasAttribute('open') || el.open === true
      )
    const mo = new MutationObserver(log)
    mo.observe(el, { attributes: true, attributeFilter: ['open'] })
    log()
    return () => mo.disconnect()
  }, [])

  return (
    <div>
      <div style={{ position: 'sticky', top: 0 }}>
        <VscodeSingleSelect id="demo-select" name="demo">
          <VscodeOption value="">Pick one…</VscodeOption>
          <VscodeOption value="1">Option 1</VscodeOption>
          <VscodeOption value="2">Option 2</VscodeOption>
          <VscodeOption value="3">Option 3</VscodeOption>
        </VscodeSingleSelect>
      </div>
      <div ref={contentRef} />
    </div>
  )
}

const root = document.getElementById('root')
createRoot(root).render(<Repro />)

Expected: Dropdown stays open until I close it.
Actual: Dropdown closes automatically on scroll.

---

Update:
Maybe related #453?

---

Update2:

As a comparison, native <select> disables the scroll when the popover is visible (on macOS):

native-select.mov

react-select lets the page scroll with an open popover:

react-select.mov

<vscode-single-select> closes the popover on page scroll:

single-select.mov

[bendera]

I recently rewrote the select components using the Popover API. The problem is the dropdown position is fixed, so it stays in a place while the rest of the page is scrolling. I like the solution of the mac os.

[bendera]

@dankeboy36 I wasn't able to reproduce this bug, but I made a possible fix. I added an extra condition that check whether component has actually moved, and only then closes the dropdown. Could you try it?

• Checkout this branch: 514-select-dropdown-closes-on-scroll
• Run npm run build
• Link the package to your project. Run the npm link command in the vscode-elements directory. Then run the npm link @vscode-elements/elements command in your project.

Related PR: #527