Unexpected Form Submission on Combobox having no results

[marilari88]

Current behavior

When using the ComboBox and performing a search that results in an empty list, pressing the 'Enter' key triggers the form submission

Steps to reproduce the bug

1. Open sandbox: https://stackblitz.com/edit/stackblitz-starters-a6j6lm?file=src%2FApp.tsx
2. Open the select combobox
3. Type 'asdasd'
4. Press 'Enter'

Expected behavior

The form submission should not be triggered as the combobox field is not a part of the form

Workaround

add form attribute to the combobox

Or #3323 (comment)

Possible solutions

No response

[diegohaz]

The combobox is rendered within the form element in the DOM, making it technically part of it. I'm not sure if there's a way we can address this in the library without impacting those who genuinely want a combobox within a form. But I'm open to suggestions.

As an alternative, you can render the SelectPopover component using the portal prop. This ensures it's not rendered within the form in the DOM:

<SelectPopover portal>

[cloud-walker]

If I understand the issue correctly it is because the focus does not remain trapped inside the Combobox popover, when no ComboboxItem are rendered, maybe we should simulate that focus anyway?

[cloud-walker]

A possible workaround may be to render a "fake" ComboboxItem during the "No results" state

[marilari88]

@diegohaz Thank you for your suggestion. I appreciate your responsiveness to the issue.

While using portal with SelectPopover seems like a promising solution, I encountered a limitation in that the dialog prevents interaction with elements outside itself

[diegohaz]

While using portal with SelectPopover seems like a promising solution, I encountered a limitation in that the dialog prevents interaction with elements outside itself

Sounds like you're describing modal. The portal prop shouldn't behave like that. If it does, it's likely a bug, and a repro would be appreciated.

[georgekaran]

While using portal with SelectPopover seems like a promising solution, I encountered a limitation in that the dialog prevents interaction with elements outside itself

You could use the getPersistentElements to allow interaction with external elements.

<SelectPopover portal className="select-dialog">

<Modal
  {...props}
  getPersistentElements={() => document.querySelector('.select-dialog')}
/>

[cloud-walker]

While using portal with SelectPopover seems like a promising solution, I encountered a limitation in that the dialog prevents interaction with elements outside itself

Sounds like you're describing modal. The portal prop shouldn't behave like that. If it does, it's likely a bug, and a repro would be appreciated.

I think that what @marilari88 meant, is that combining the combobox with portal inside a form, inside a modal dialog, it breaks:

<Modal>
  <form>
    <Combobox portal>

[diegohaz]

If that's the case and Modal is a component that uses the Ariakit Dialog component, I'd still appreciate a separate bug report. It's supposed to work seamlessly. Check out the Dialog with Menu example where the nested Menu component uses the portal prop and gets rendered within a modal dialog. The behavior for SelectPopover should be pretty similar.

[jasikpark]

https://open-ui.org/components/selectlist/#keyboard-behavior suggests that this is correct behavior?