Fix Popper positioning to be consistent

This commit is contained in:
Rafael 2021-12-07 10:14:48 -03:00 committed by Thomas Zarebczan
parent cdc1c0dce4
commit e8e1c7e3b4

View file

@ -8,6 +8,7 @@ import EMOJIS from 'emoji-dictionary';
import React from 'react'; import React from 'react';
import TextareaSuggestionsItem from 'component/textareaSuggestionsItem'; import TextareaSuggestionsItem from 'component/textareaSuggestionsItem';
import TextField from '@mui/material/TextField'; import TextField from '@mui/material/TextField';
import Popper from '@mui/material/Popper';
import useLighthouse from 'effects/use-lighthouse'; import useLighthouse from 'effects/use-lighthouse';
import useThrottle from 'effects/use-throttle'; import useThrottle from 'effects/use-throttle';
@ -343,6 +344,7 @@ export default function TextareaWithSuggestions(props: Props) {
return ( return (
<Autocomplete <Autocomplete
PopperComponent={AutocompletePopper}
autoHighlight autoHighlight
disableClearable disableClearable
filterOptions={(options) => options.filter(({ label }) => allMatches && allMatches.includes(label))} filterOptions={(options) => options.filter(({ label }) => allMatches && allMatches.includes(label))}
@ -375,6 +377,10 @@ export default function TextareaWithSuggestions(props: Props) {
); );
} }
function AutocompletePopper(props: any) {
return <Popper {...props} placement="top" />;
}
function useSuggestionMatch(term: string, list: Array<string>) { function useSuggestionMatch(term: string, list: Array<string>) {
const throttledTerm = useThrottle(term); const throttledTerm = useThrottle(term);