TextField autofocus breaks when defining actions

[hahn-kev]

This example from the docs which defines an action, does not autofocus when you add the autofocus attribute

<TextField
  label="Name"
  autofocus
  actions={(node) => [
    debounceEvent(node, {
      type: "input",
      listener: (e) => {
        // @ts-expect-error
        console.log(e.target.value);
      },
      timeout: 500,
    }),
  ]}
/>

but if you remove the action then it starts working

<TextField
  label="Name"
  autofocus
/>

I wouldn't expect those 2 things to effect each other.

as a workaround this should work:

<script>
  import { autoFocus } from 'svelte-ux';
</script>
<TextField
  label="Name"
  actions={(node) => [
    debounceEvent(node, {
      type: "input",
      listener: (e) => {
        // @ts-expect-error
        console.log(e.target.value);
      },
      timeout: 500,
    }),
    autoFocus(node)
  ]}
/>

[techniq]

Thanks for the issue @hahn-kev. At the moment autoFocus is just a convenience to add the autoFocus action as the initial actions value (save an import and less boilerplate) since it's a common use case. We could possibly initialize actions as an empty array and then add autoFocus in onMount or similar, but would need some exploration.

I'm also keeping an eye on the new attachments PR proposal as a replacement for actions with better compatibility (and other improvements).