[combobox] Add data-active attribute for Combobox.Chip

[DavidCodina]

Feature request

For the multiple select Combobox implementation, pressing the back arrow from being inside the <input> causes the last Chip to be "active". Pressing the back arrow again causes the second-to-last Chip to be "active". This allows us to selectively delete a particular Chip by pressing the delete key. However, there doesn't seem to be any associated data attribute that would allow someone to conditionally style the Chip.

I'm requesting that something like data-active be added to a Chip when it's currently "active". This would allow us to create focus-like styles in the UI.

Thanks.

[mj12albert]

You can target it with :focus-within, there's a button element in the Chip:

base-ui/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css

Lines 52 to 55 in 65c2d3a

	&:focus-within {
	background-color: var(--color-blue);
	color: var(--color-gray-50);
	}

chips.mov

[DavidCodina]

Oh! Okay. That works! I noticed the focus-within styles on the documentation example. I tried to use tab to get to the chips, and that didn't work - presumably because there's tabindex="-1" on Chip and ChipRemove. So I removed the styles. This was before I realized one could use the arrows, but it didn't occur to me that focus was being added programmatically. My bad.

I also tried it without the presence of the ChipRemove button, and it worked. This indicates that focus is given directly to the Chip itself, and there's no dependency on a child element (e.g., button) having focus. In practice, one could use focus-visible to style the Chip, but it still makes more sense to use focus-within in case focus ever moved from the Chip to a ChipRemove child.

Great job! Thank you.