import { Component , createSignal , JSX , onMount } from 'solid-js' ; import { preventDefault , stopPropagation } from '../lib/helpers' ; interface Props { query ? : string ; onSubmit : ( query : string ) => void ; } const SearchForm = ( props ) => { const [ input , setInput ] = createSignal ( props . query || '' ) ; let inputRef = undefined ; onMount ( ( ) => inputRef ?. focus ( ) ) ; const handleInput = ( { currentTarget : { value } } ) => setInput ( value ) ; const handleSubmit = preventDefault ( ( ) => { const newQuery = input ( ) . trim ( ) ; if ( newQuery && newQuery !== props . query ) props . onSubmit ( newQuery ) ; } ) ; return ( < form className = "search-form" onSubmit = { handleSubmit } > < div className = "textfield" > < label className = "sr-only" htmlFor = "search" > Search < /label> < input ref = { inputRef } aria - label = "Search" value = { input ( ) } name = "search" className = "textfield__input" id = "search" type = "text" placeholder = "Search..." onKeyPress = { stopPropagation ( ) } onChange = { handleInput } / > < /div> < /form>); } ; export default SearchForm ;