Horizontal scrolling tabs

[steveoh]

I have a small area to add tabs and I need more tabs in my tablist than there is horizontal space for. To allow the tabs to scroll i've added a div around the tablist that allowed it to scroll.

 <Tabs onSelectionChange={(key) => console.log(key)}>
  <TabList aria-label="Project details" className="overflow-y-hidden overflow-x-scroll pb-4">
    <Tab id="details">Details</Tab>
    <Tab id="features">Features</Tab>
    <Tab id="reference">Reference</Tab>
  </TabList>

Then I want to scroll the tab into view when it's clicked on but I'm not sure how to access the tab to use scrollIntoView. I've also explored the tailwind scroll snapping without any luck.

Does anyone have any advice for how to achieve this?

[steveoh]

🦗 Happy new year :)

[universse]

you can add a ref to the list element then

ref.current.querySelector('[role="tab"][aria-selected="true"]')

[steveoh]

Here's the solution I'm using. I put the ref on the nearest parent to the tabs since tabs didn't accept a ref. I added the set timeout to allow the tabs to set the aria-selected prop.

<div ref={tabRef}>
	<Tabs
	  onSelectionChange={(key) => {
	    console.log(key);
	    setTimeout(
	      () =>
	        tabRef.current
	          ?.querySelector('[role="tab"][aria-selected="true"]')
	          ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }),
	      0,
	    );
	  }}
	>
...
</div>