Exclude the user-specified DOM element from dismissalbeElement in Combobox.

[erm1116]

🚀 Feature request

In Combobox component, we want to exclude the specified DOM element from the dismissableElement.
This works well when combining TagsInput and Combobox.

🧱 Problem Statement / Justification

The combination with TagsInput is useful when building Combobox(multiple).
(I also know that there is an example in composition: https://github.com/chakra-ui/zag/blob/main/examples/next-ts/pages/composition/combo-tags.tsx )

At this time, we want to provide consistency in the behaviour of Combobox.
Specifically, we want to prevent the Combobox content from closing when a Tag's closeTrigger is clicked.
In other words, we want to prevent it from being dismissed.

current behavior is like below:

• When clicking on an item in the listbox that is still selected: the listbox remains open

CleanShot.2024-06-14.at.10.07.18.mp4

• Deleting a tag in input with Backspace: listbox remains open

CleanShot.2024-06-14.at.10.07.52.mp4

• When clicking on the clear trigger of a tag: the listbox closes

CleanShot.2024-06-14.at.10.08.27.mp4

✅ Proposed solution or API

Allowing the user to specify the exclude target DOM of the trackDismissableElement may solve this problem.
For example, I am considering adding a context such as excludeDismissableElements and passing it to the exclude of trackDismissableElement.
This would allow for preventing dismiss on certain elements in addition to the existing input, trigger, and clearTrigger.

But I'm not sure if the idea is appropriate, so I'd like your opinion.

↩️ Alternatives

📝 Additional Information

[segunadebayo]

Love the detailed breakdown of your request. Makes it easier to chime in.

There's no need to introduce a new property in this case. You can leverage the onInteractionOutside event of the combobox to prevent closing when clicking on the tags.

function onInteractOutside(event) {
          const { target } = event.detail.originalEvent
          if (!isHTMLElement(target)) return
          if (target.closest("[data-part=tag]")) {
            event.preventDefault
          }
   },

That goes into the machine like so:

[erm1116]

@segunadebayo
You're right!!

zag/packages/utilities/dismissable/src/dismissable-layer.ts

Lines 69 to 79 in 5c1ff93

	function onPointerDownOutside(event: PointerDownOutsideEvent) {
	const target = getEventTarget(event.detail.originalEvent)
	if (layerStack.isBelowPointerBlockingLayer(node!) || layerStack.isInBranch(target)) return
	options.onPointerDownOutside?.(event)
	options.onInteractOutside?.(event)
	if (event.defaultPrevented) return
	if (debug) {
	console.log("onPointerDownOutside:", event.detail.originalEvent)
	}
	onDismiss?.()
	}

It is checking defaultPrevented in the above section, so the only thing I have to do is calling event.preventDefault() conditionally.
Thanks for the quick response!

[segunadebayo]

Yes, calling event.preventDefault() is all you have to do.