[BUG] - Select component scrolled through page

[uigywnkiub]

NextUI Version

2.4.2

Describe the bug

Select component scrolled through page. (It's my NDA pet-project, do not use anything for you about it)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

When click of Select it's became floating card

Expected behavior

Select menu must be stricted on his place

Screenshots or Videos

Screen.Recording.2024-06-16.at.18.09.18.mov

Operating System Version

• OS: macOS

Browser

Chrome

[linear]

ENG-1018 [BUG] - Select component scrolled through page

[wingkwong]

I couldn't reproduce this issue on our doc page. Please share a minimal reproducible project for us to investigate.

[uigywnkiub]

I couldn't reproduce this issue on our doc page. Please share a minimal reproducible project for us to investigate.

I record a screen video to showing the bug, on previous version of nexutui all being good. It's my pet project, without any custom logic, on Select component.

[wingkwong]

Is your select component inside a modal?

[uigywnkiub]

Is your select component inside a modal?

I'm sorry but no)

  return (
    <Accordion
      isCompact
      hideIndicator
      onExpandedChange={onExpandedChangeCallback}
    >
      <AccordionItem
        key='1'
        isCompact
        aria-label={isExpanded ? 'Hide Form' : 'Show Form'}
        title={isExpanded ? 'Hide Form' : 'Show Form'}
        classNames={{
          title: 'text-center hover:opacity-hover',
        }}
      >
        <form
          className='mx-auto'
          action={createTransactionWithUserId}
          onSubmit={onSubmitCallback}
        >
          <Switch
            color='success'
            name='isIncome'
            value='isIncome'
            aria-label='Income Switch'
            onValueChange={onSwitchChangeCallback}
          >
            Income
          </Switch>
          <Input
            type='text'
            name='description'
            aria-label='Description'
            required
            size='lg'
            color={isSwitchedOn ? 'success' : 'danger'}
            placeholder={
              isSwitchedOn
                ? 'Type income transaction...'
                : 'Type expense transaction...'
            }
            classNames={{
              input: 'border-none focus:ring-0 placeholder:text-default-500',
              inputWrapper: 'h-20 my-2',
            }}
            endContent={
              <Input
                type='text'
                name='amount'
                aria-label='Amount'
                required
                maxLength={6}
                pattern='\d+'
                inputMode='decimal'
                placeholder='0'
                size='lg'
                classNames={{
                  input:
                    'border-none focus:ring-0 placeholder:text-default-500 text-center',
                  inputWrapper: 'h-12 w-full',
                  base: 'w-36',
                }}
                endContent={
                  <div className='pointer-events-none flex items-center'>
                    <span className='text-md text-lg text-default-500'>
                      {CURRENCY_SIGN}
                    </span>
                  </div>
                }
              />
            }
          />
          <div className='flex justify-between'>
            <div className='flex items-center gap-2'>
              <div className='flex w-full flex-wrap gap-4 md:flex-nowrap'>
                <Select
                  name='category'
                  aria-label='Category'
                  className='w-52'
                  defaultSelectedKeys={[DEFAULT_CATEGORY]}
                >
                  {categories.map((category, idx, arr) => (
                    <SelectSection
                      key={category.target}
                      showDivider={idx !== arr.length - 1}
                      title={category.target}
                    >
                      {category.items.map((item) => (
                        <SelectItem key={item.name}>
                          {`${item.emoji} ${item.name}`}
                        </SelectItem>
                      ))}
                    </SelectSection>
                  ))}
                </Select>
              </div>
            </div>
            <div className='flex items-center'>
              <p className='text-sm text-default-500'>
                Press{' '}
                <button
                  aria-label='Enter'
                  type='submit'
                  className='cursor-pointer'
                >
                  <Kbd keys={['enter']}>Enter</Kbd>
                </button>{' '}
                to Add Transaction
              </p>
            </div>
          </div>
        </form>
      </AccordionItem>
    </Accordion>
  )

[winchesHe]

@uigywnkiub I have tried in dev enviroment, and I couldn't reproduce this issue, could you provider a minimal reproducible project or a reproducible codesandbox for us to investigate

CleanShot.2024-07-01.at.22.47.19.mp4

[winchesHe]

@uigywnkiub I have reproduced this issue, it was a usage issus, cause current popover is using absolute to locate in page, therefore if you put the select in scrolling container, and scroll the container not the page it will cause this issue

CleanShot.2024-07-01.at.23.03.58.mp4

[techchintan]

@jrgarciadev @wingkwong - is this code released? - i am facing same issue while using v2.4.2

[wingkwong]

@techchintan Not yet. It will be available in the upcoming v2.4.3. or you can use canary version if necessary.

[techchintan]

@techchintan Not yet. It will be available in the upcoming v2.4.3. or you can use canary version if necessary.

I have no idea how to use canary version, can you suggest me? @wingkwong

[wingkwong]

@techchintan replace the version by 0.0.0-canary-20240708000658

e.g.

"@nextui-org/react": "0.0.0-canary-20240708000658"

or if you use individual package

"@nextui-org/select": "0.0.0-canary-20240708000658"