List items not being rendered while keyboard navigation in production (with preact)

[AkashRajpurohit]

Hi @timc1, firstly thanks for creating this awesome library, totally love it. I am integrating this to my site as well and found some issues with the styling when running a production build.

https://user-images.githubusercontent.com/30044630/165342660-f12c60a9-70c2-4bb6-9134-1aebc6eefadb.mp4

In the first tab, I am running next dev command and here navigation both via keyboard and mouse scroll works perfectly fine but on the second tab which is running the next build and next start command, in that case the styling seems to be breaking.

I am doing the pretty standard configuration for kbar and using tailwindcss for styles.

This is what the ResultItem looks like,

const ResultItem = forwardRef(
  ({ item, active }: RenderParams<ActionImpl>, ref: React.Ref<HTMLDivElement>) => {
    return (
      <div
        ref={ref}
        className={clsx(
          'flex items-center justify-center cursor-pointer py-2 px-4 transition-colors',
          active ? 'bg-gray-100 dark:bg-gray-800' : 'bg-transparent'
        )}
      >
        <div className="flex gap-3 min-h-fit items-center w-full text-base">
          {item.icon && <div className="mr-2 flex">{item.icon}</div>}
          <span className="flex-auto text-base line-clamp-1 capitalize">{item.name}</span>
          <div className="flex gap-1">
            {(item.shortcut || []).map((shortcut) => (
              <div key={shortcut}>
                <span className="flex px-4 py-1 items-center justify-center rounded-md bg-gray-200 dark:bg-gray-700">
                  {shortcut}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
)

I have been trying to debugging this myself but not able to come to any conclusion. one thing I noticed was in production build the height value here keeps updating when scrolling (which is not the case of next dev runs)

[AkashRajpurohit]

Something to add

If you'd notice the underlined part, the active descendant is kbar-listbox-item-15 but last added item in list is kbar-listbox-item-12.

[AkashRajpurohit]

Seems like the issue was with preact, in prod builds I was swapping react with preact and that was causing some issue. Not sure if this is something with kbar or react-virtual, so i'll keep this issue open.

For anyone else facing this issue, you probably have the same scenario so don't swap with preact for the time being is the solution for me to fix it on production.

[stale[bot]]

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.