Capturing enter key on ListInput (svelte)

1

I am trying to call a function when a user hits the enter key while inside of a ListInput. I added an attribute on:input={handleEnter}

function handleEnter(evt) {
  console.log(evt)
}

When I hit enter in the field the handleEnter function is not called. It is called for other keys though.

Any suggestions on how to be able to handle the enter key?

2

you need to listen for keypress event instead of input

3

This does not seem to call handleEnter when I type inside the ListInput.

 <ListInput  label="Email" type="email" on:keypress={handleEnter} />
4 
<ListInput class="my-list-input" ...

<script>
...

import { onMount } from 'svelte';

onMount(() => {
  document.querySelector('.my-list-input input').addEventListener('keypress', doSomething);
});
</script>
5

What about this way:

<ListInput ...>
   <input slot="input" type="text" id="email" name="email" on:keypress={handleKeypress} bind:value={inputVar} />
</ListInput>

Just mentioning as a possible alternative in case someone finds this.