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:
committed by
Benoit TELLIER
parent
80c1babb7f
commit
732c2cd051
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user