fix: disable browser autocomplete and fix React key error in PeopleSearch

- Add autoComplete attributes to disable browser suggestion tooltip
- Fix React key prop warning by properly handling key from Autocomplete props
- Add objectTypes to useEffect dependency array
This commit is contained in:
lenhanphung
2025-10-07 15:40:27 +07:00
committed by Benoit TELLIER
parent 80c1babb7f
commit 732c2cd051
+11 -4
View File
@@ -54,7 +54,7 @@ export function PeopleSearch({
}, 300); }, 300);
return () => clearTimeout(delayDebounceFn); return () => clearTimeout(delayDebounceFn);
}, [query]); }, [query, objectTypes]);
return ( return (
<Autocomplete <Autocomplete
@@ -94,6 +94,7 @@ export function PeopleSearch({
helperText={error} helperText={error}
placeholder="Start typing a name or email" placeholder="Start typing a name or email"
label="Start typing a name or email" label="Start typing a name or email"
autoComplete="off"
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter" && onToggleEventPreview) { if (e.key === "Enter" && onToggleEventPreview) {
e.preventDefault(); e.preventDefault();
@@ -103,6 +104,7 @@ export function PeopleSearch({
slotProps={{ slotProps={{
input: { input: {
...params.InputProps, ...params.InputProps,
autoComplete: "new-password",
startAdornment: ( startAdornment: (
<> <>
<PeopleOutlineOutlinedIcon <PeopleOutlineOutlinedIcon
@@ -121,14 +123,19 @@ export function PeopleSearch({
), ),
}, },
}} }}
inputProps={{
...params.inputProps,
autoComplete: "new-password",
}}
/> />
)} )}
renderOption={(props, option) => { renderOption={(props, option) => {
if (selectedUsers.find((u) => u.email === option.email)) return; if (selectedUsers.find((u) => u.email === option.email)) return null;
const { key, ...otherProps } = props as any;
return ( return (
<ListItem <ListItem
{...props} key={key}
key={option.email + option.displayName} {...otherProps}
disableGutters disableGutters
> >
<ListItemAvatar> <ListItemAvatar>