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"/>
);
}
export default TextField;`
Thanks for your reponses!
Top comments (0)