[BUG] - Select component when clicked scrolls down the page

[claide]

NextUI Version

2.2.10

Describe the bug

I installed NextUI on my Next project 14.0.3. I tried to use the Select component and supplied a dynamic values of ages. What happen is when I click on the Select component, the page scrolls down to the level of where the select component is positioned and it changes its value. It always happen only when I supply the ages values to the select component.

I also found out that the Select component only accepts string values which is I convert my ages to string type.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

This is my age values

import { Option } from '@/types/Option'

export const ageOptions = (): Option<number>[] => {
  return Array.from({ length: 68 }, (_, index) => {
    const value = 18 + index
    return { value, label: `${value}` }
  })
}

Option type

export interface Option<TValue> {
  value: TValue
  label: string
}

Page component

import {
  ageOptions as ageOptionFn,
} from '@/utils/options'

const ageOptions = ageOptionFn()

const ViewTrigger: React.FC<TriggerProps> = ({ triggerData }) => {
  return (
    <>
      // some codes here...
      <Select
        items={ageOptions}
        defaultSelectedKeys={[ageTo.toString()]}
        label="Age To"
        labelPlacement="outside"
        onChange={handleSelect(setAgeTo)}
        selectionMode="single"
        disallowEmptySelection={true}
        className="absolute right-0 w-1/2"
      >
        {(item) => <SelectItem key={item.value}>{item.label}</SelectItem>}
      </Select>
    </>
  )
}

Expected behavior

As a user, I expect to see normal behavior of select box but I am experiencing weird things like scrolling the page down and changing the value when clicking the component.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-740 [BUG] - Select component when clicked scrolls down the page

[wingkwong]

1. can you try on the latest version? we've changed quite a lot after 2.2.10.
2. can you also show a screen record to demonstrate the issue?
3. a stackblitz link would be nice for us to start debugging on the same ground.

[chiester]

I am experiencing this same issue even after upgrading to 2.3.6

[chiester]

This has to do (for me) with having the Select component set to full width on mobile. If I change "w-full" to, say, "w-5/6", the scroll jump does not happen.

[wingkwong]

Closing due to no response from OP.

[claide]

Sorry for the late update, I believe it's due to how I structure my divs. I tried to put the component inside it's own parent div and the issue disappeared.

[ncullen93]

I also have this issue - the Select component jumps when selected on mobile, but setting the width to anything under 90% fixes the behavior