Surprising behavior of hidden state on Command.Group during filtering

[FredrikAugust]

Hey! We recently started using the Command component, and we're loving almost every minute of it.

The only thing we found surprising, and spent some time figuring out was how to hide the Command.Group during filtering when none of the items in the group matched.

After some digging, I found

bits-ui/packages/bits-ui/src/lib/bits/command/command.svelte.ts

Lines 1216 to 1217 in 7f8c035

	hidden: this.shouldRender ? undefined : true,
	"data-value": this.trueValue,

Which on paper works great, but we ran into a bit of "strange" behavior if you wish; when you set hidden on a HTML element, but also flex as class, the flex takes precedence. I don't think we're alone in using it this way, nor being surprised.

Could a potential fix be to use data-hidden instead (or and to preserve backwards compatibility) instead? Or if you don't want to change it, perhaps add a warning to the docs?

Repro: https://stackblitz.com/edit/egxubfvg-qx4lmb46?file=src%2Froutes%2F%2Bpage.svelte

[FredrikAugust]

So upon further investigation, I had trouble reproducing this in the stackblitz editor, and turns out that this is something that is being changed by the Preflight styling from Tailwindcss:

https://github.com/tailwindlabs/tailwindcss/blob/f945c3d29fe0235c37c46bc00df906a720707738/packages/tailwindcss/preflight.css#L387-L393

However, we're not using that, and thus were hit by the "bug" if you want to call it that.

[huntabyte]

Wow, I did not even know this was a thing tbh, but was able to repro:
https://svelte.dev/playground/0759c8c0f191406fa187cf25c79a755d?version=5.40.0

I'm trying to determine what the ideal approach to handling this is. While we could add data-hidden it's essentially the same thing as hidden - an attribute that can be targeted and handled accordingly.

This feels like something out of the scope of Bits UI to deal with/even document really, beyond perhaps mentioning that we apply the hidden attribute to hide the element?

[FredrikAugust]

While we could add data-hidden it's essentially the same thing as hidden - an attribute that can be targeted and handled accordingly.

I agree, the thought was that data-[hidden] would be a bit more similar to how a lot of other styles are handled.

This feels like something out of the scope of Bits UI to deal with/even document really, beyond perhaps mentioning that we apply the hidden attribute to hide the element?

I agree it's out of bits ui's responsibilities to handle this, but I think it could be helpful to document. For .Item for instance, there is a very nice list of data-props that are set, and I believe doing the same with the hidden prop/data-[hidden] prop would have made it easier for me to track down this "bug", and it's a bug others could run into as well.