DEV Community

Fredouze
Fredouze

Posted on

TypeError: event.target is undefined whith Turnstone

Hello everyboby i use this input whith Turnstone for de fonction autocomplete. But i this error: TypeError: event.target is undefined. But i am not whith input react. This is a like for Turnstone.
https://turnstone.tomsouthall.com/

This is my component

`import { useId } from "react";
import React from 'react'
import Turnstone from 'turnstone'

const styles = {
input: 'w-full h-12 border border-oldsilver-200 pl-10 pr-7 text-xl outline-none rounded',
query: 'text-oldsilver-800 placeholder-oldsilver-400',
typeahead: 'text-crystal-500 border-white',
cancelButton: absolute w-10 h-12 inset-y-0 left-0 items-center justify-center z-10 text-crystal-600 inline-flex sm:hidden,
clearButton: 'absolute inset-y-0 right-0 w-8 inline-flex items-center justify-center text-crystal-500 hover:text-hotpink-300',
listbox: 'w-full bg-white sm:border sm:border-crystal-500 sm:rounded text-left sm:mt-2 p-2 sm:drop-shadow-xl',
groupHeading: 'cursor-default mt-2 mb-0.5 px-1.5 uppercase text-sm text-hotpink-300',
item: 'cursor-pointer p-1.5 text-lg overflow-ellipsis overflow-hidden text-oldsilver-700',
highlightedItem: 'cursor-pointer p-1.5 text-lg overflow-ellipsis overflow-hidden text-oldsilver-700 rounded bg-crystal-100',
match: 'font-semibold',
noItems: 'cursor-default text-center my-20'
}

// Set up listbox contents.
const listbox = {
displayField: 'name',
data: (query) =>
fetch(https://localhost:8000/livesearch?query=${encodeURIComponent(query)}&limit=10)
.then(res => res.json())
}

function TextField({ placeholder, labelTitle, value, onChange, error, name }) {

const id = useId();

const handleChange = (event) => {
    onChange(event.target.value);
}

return (

        <Turnstone id="autocomplete" listbox={listbox} styles={styles} typeahead={false} value={ value } name='ville'  onChange={ handleChange } placeholder="Enter a city or airport"/>

);
Enter fullscreen mode Exit fullscreen mode

}

export default TextField;`

Thanks for your reponses!

Top comments (0)