Prevent submit event from firing when enter is pressed on search input

Problem

If you have a <PowerSelectMultiple /> with searchEnabled inside a <form> and press <kbd> Enter </kbd> while searching or choosing with keyboard, the submit event gets triggered on the <form> causing an unexpected UX (submitting the form…)

After a long debugging session I noticed something that is not entirely a bug from ember-power-select but how browsers handle form submit events: submit events get triggered on the <form> element and can’t be stopped from being executed when any button with type submit gets pressed or <kbd> Enter </kbd> is pressed while on any of the form’s inputs , i.e. stopPropagation on <kbd> Enter </kbd> doesn’t work at all.

Having

<form {{on "submit" this.onSubmit}}>
 <PowerSelectMultiple
    @options={{array "1" "2" "3"}}
    @selected={{this.selected}}
    @onChange={{this.onChange}}
    @searchEnabled={{true}}
  as |option|>
    {{option}}
 </PowerSelectMultiple>
  <button type="submit">Submit</button>
</form>

I have two possible solutions in mind:

1. One way to solve this and probably the most a11y friendly, is to wrap this search input inside its own <form> and so prevent the submit event to be triggered on the parent form.
2. Use the form attribute to fake the browser that this input is meant to submit the fake form with id “fake-form-power-select-form”

<input form="fake-form-power-select-form" />

What do you think?

Something like this

 <form
          class="euiComboBox__input"
          style="font-size: 14px; display: inline-block;"
          {{on "submit" (prevent-default)}}
        >
          <input
            class="ember-power-select-trigger-multiple-input euiComboBox__input"
            autocomplete="off"
            autocorrect="off"
            autocapitalize="off"
            spellcheck={{false}}
            id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
            value={{@select.searchText}}
            aria-controls={{@listboxId}}
            style={{this.triggerMultipleInputStyle}}
            placeholder={{this.maybePlaceholder}}
            disabled={{@select.disabled}}
            tabindex={{@tabindex}}
            {{on "focus" @onFocus}}
            {{on "blur" @onBlur}}
            {{on "input" this.handleInput}}
            {{on "keydown" this.handleKeydown}}
            {{did-insert this.storeInputStyles}}
          />
  </form>

[cibernox]

I should be releasing a patch version at some point today

[cibernox]

I opened a PR using the second option (adding form="non-existent-form"). I like that better because it’s zero-javascript and i’m not sure nested forms are legal.