svelte-headlessui icon indicating copy to clipboard operation
svelte-headlessui copied to clipboard

Stricter 'value' type for list items

Open CaptainCodeman opened this issue 2 years ago • 2 comments
trafficstars

It's a little "loosey-goosey" right now, using "any" for the value but really expecting / treating things as a string in some places.

It either needs to be a string consistently or could allow an object if the component is also provided with a "get me the string value" function.

This would also allow stricter lint checks.

CaptainCodeman avatar Dec 26 '22 19:12 CaptainCodeman

It's nice to be able to use "any" object for the item data, but some components need to match on string values. So if the item value isn't a string, and it may not always make sense to use the textContent of the item elements, we need to provide a property name or selector function to extract the value.

CaptainCodeman avatar Aug 10 '23 20:08 CaptainCodeman

Any more thoughts on this? I have run into a situation that has caused a bit of confusion.

It seems that when you call $menu.active it returns the text value of (node: HTMLElement). So if I have something like the following:

{#each projectItems as project, i}
	{@const menuID = 'menuItem-' + (i + 1)}
	<a use:menu.item href="" id={menuID}>content {i} 
		<span>extra fancy stuff</span>
	</a>
{/each}

$menu.active would return "content # extra fancy stuff"

In a situation where the menu has more banner-like items that include additional content this could become verbose and complicated, especially if the banners are components.

Given it is possible to control the id and that "aria-activedescendant" is identified based on the item id would it make sense to include something like $menu.activeID to return this id for easier addressing and identifying the active element?

bertramdesigns avatar Sep 06 '23 12:09 bertramdesigns