When keyboard navigate the select items should not appear on view port in select component options

[RajaARK99]

Description

In select component when options are overflowed and keyboard navigation is applied the highlighted item should not appear in view port.

Adoptrise.-.Brave.2024-04-27.16-33-23.mp4

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/distracted-wilson-mpdnf4?file=%2Fsrc%2FApp.tsx%3A27%2C1

Steps to Reproduce

import { ChevronDownIcon } from 'lucide-react'
import { Portal, Select } from '@ark-ui/react'

export const Basic = () => {
  const items = ["Name 1",
            "Name 2",
            "Name 3",
            "Name 4",
            "Name 5",
            "Name 6",
            "Name 7",
            "Name 8",
            "Name 9",
            "Name 10",
            "Name 11",
            "Name 12",
            "Name 13",
            "Name 14",]
  return (
    <Select.Root items={items} positioning={ {
                fitViewport: true,
                placement: "bottom-start",
                sameWidth: true,
              }
            }>
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <ChevronDownIcon />
          </Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              {items.map((item) => (
                <Select.Item key={item} item={item}>
                  <Select.ItemText>{item}</Select.ItemText>
                  <Select.ItemIndicator>✓</Select.ItemIndicator>
                </Select.Item>
              ))}
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Portal>
    </Select.Root>
  )
}

Use this code

Ark UI Version

2.2.3

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

No response

[Segun Adebayo]

I can't reproduce this @ RajaARK99; your reproduction works on my end.

Here's a video:
https://github.com/chakra-ui/ark/assets/6916170/c5ce3e2b-dfb1-4d2d-b4fd-2ca22e69ba62

Kindly debug this in your application.