How to replicate group sticky header?

[tsuharesu]

I see that it was removed on f3ff3f5. I actually use that prop on some of my lists. Is there a way to replicate it?

[csandman]

Yeah this is pretty straightforward to add with the chakraStyles prop! That was the main reason it was removed, it's very simple to add as an end-user, and it's not really replicating something from React Select or Chakra.

Here's an example of how you can add it with just a few custom styles:

const App = () => (
  <Select
    chakraStyles={{
      groupHeading: (base) => ({
        ...base,
        borderBottomWidth: 1,
        position: 'sticky',
        top: -2,
        bg: 'white', // Make this match whatever the background color of your modal is
        zIndex: 1,
      }),
    }}
  />
)

Here's a complete example: https://stackblitz.com/edit/vitejs-vite-ngfuyh?file=src%2Fapp.tsx

[tsuharesu]

Thank you!