[Select]: can not prevent close select when click button in select item

[army-u8]

When the button in the select item called click event , cannot prevent the close of the select item and call click event

I want to trigger a button click event and prevent the close of select when the button is clicked. thanks

[jer3m01]

You can control the open state for custom behavior using the open and onOpenChange props on <Select.Root/> https://kobalte.dev/docs/core/components/select#selectroot.

Here's an example of the same props from the Tooltip component: https://kobalte.dev/docs/core/components/tooltip#controlled-open.

[army-u8]

You can control the open state for custom behavior using the open and onOpenChange props on <Select.Root/> https://kobalte.dev/docs/core/components/select#selectroot.

Here's an example of the same props from the Tooltip component: https://kobalte.dev/docs/core/components/tooltip#controlled-open.

Thank you for your answer， I found that I placed the action button inside on <Select.ItemLabel>, it should be placed in the sibling element with <Select.ItemLabel> ,Now able to trigger the click event for button

But there's another problem here，the action button isDialog trigger use as open dialog ,I successfully opened the dialog, but as the <Select.Content> disappeared, the dialog also disappeared ,i try to log dialog props onOpenChange , no result

[army-u8]

Test code as like

<Select.Root
          options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
          placeholder="Select a fruit…"
          itemComponent={(props) => (
            <Select.Item item={props.item} class={style.select__item}>
              <Select.ItemLabel>{props.item.rawValue}</Select.ItemLabel>
              <TestDialog
                trigger={
                  <button>
                    open
                  </button>
                }
              />
            </Select.Item>
          )}
        >
          <Select.Trigger class={style.select__trigger} aria-label="Fruit">
            <Select.Value<string> class={style.select__value}>{(state) => state.selectedOption()}</Select.Value>
            <Select.Icon class={style.select__icon}>
              <IconCaretDown />
            </Select.Icon>
          </Select.Trigger>
          <Select.Portal>
            <Select.Content class={style.select__content}>
              <Select.Listbox class={style.select__listbox} />
            </Select.Content>
          </Select.Portal>
        </Select.Root>

function TestDialog(props: { trigger: JSX.Element }) {
  return (
    <Dialog.Root>
      <Dialog.Trigger class={style.dialog__trigger}>{props.trigger}</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay class={style.dialog__overlay} />
        <div class={style.dialog__positioner}>
          <Dialog.Content class={style.dialog__content}>
            <div class={style.dialog__header}>
              <Dialog.Title class={style.dialog__title}>About Kobalte</Dialog.Title>
              <Dialog.CloseButton class={style.dialog__close_button}></Dialog.CloseButton>
            </div>
            <Dialog.Description class={style.dialog__description}>
              Kobalte is a UI toolkit for building accessible web apps and design systems with SolidJS. It provides a
              set of low-level UI components and primitives which can be the foundation for your design system
              implementation.
            </Dialog.Description>
          </Dialog.Content>
        </div>
      </Dialog.Portal>
    </Dialog.Root>
  )
}