<Field/>: select text on focus

[evdama]

What do you think about adding an action like this to the Field component:

export const selectTextOnFocus = ( node ) => {
  const handleFocus = event => { node && typeof node.select === 'function' && node.select() }
  node.addEventListener( 'focus', handleFocus )
  return { destroy() { node.removeEventListener( 'focus', handleFocus ) } }
}

You'd use it on an input in order to select all text on focus e.g. the inital value used with a placeholder attribute (e.g. [email protected]) and once the user clicks on the form field it would select all of [email protected] and as soon as he starts typing his own email it would delete the placeholder text and show his input without the user needing to press backspace many times to empty the input field before he can start typing.

You'd use the action from above like this:

first import it of course import { selectTextOnFocus } from '../ui/inputActions'

then use it on an input field (the one used inside the Field component for example) <input type='email' placeholder='[email protected]' use:selectTextOnFocus/>

More information on actions and the use directive here https://medium.com/better-programming/practical-svelte-the-use-directive-60635671335f https://svelte.dev/docs#use_action

[tjinauyeung]

Thanks for the issue, apologies for the late reply.

The suggestion you're making is quite specific and I doubt if it should be the responsibility of a form validation library to enable this. However, I understand that it would be nice to be able to pass directives to the helper components, so I'll look into forwarding directives to the underlying input component.