Taper focus når den brukes utenfor form: <Search />

[perzonas]

Tilbakemelding

Kan ikke bruke komponenten når den er utenfor et form scope; får skrevet 1 tegn etter det taper input feltet fokus og jeg må trykke på det igjen for at få focus igjen.

export function DataTableSearch() {
    const [value, setValue] =
        useState<string | undefined>(undefined)

    return (
        <Search
            w='18rem'
            placeholder='Søk her...'
           value={value}
           onChange={(event) => setValue(event.target.value)}

        />
    )
}

Dette fungerer helt fint for input komponenten og burde fungere også for søk komponenten da den bare en en wrapper på chakra sin input komponent

[joonerik]

Møtte også på denne. Ved nærmere titt:

"Ser ut som den trigger en unødvendig oppdatering av dom så vi får et nytt inputfelt i dom hver gang man skriver noe i stede for at react bare oppdaterer value på inputfeltet i dom slik den ideelt skal. Det skyldes nok at de lager en en Arrow function for grensesnittet før de returner det i samme komponent. Kode her Å returnere grensesnittet direkte vil løse problemet (altså droppe hele RenderInputGroup steget)"

[chrhein]

Takk for innspill og løsningsforslag! Skal få endret denne ganske snart ☺️