mirror of
				https://github.com/cinnyapp/cinny.git
				synced 2025-11-04 06:20:28 +03:00 
			
		
		
		
	fix autocomplete menu flickering issue (#2220)
This commit is contained in:
		
							parent
							
								
									9fe67da98b
								
							
						
					
					
						commit
						3ada21a1df
					
				
					 1 changed files with 11 additions and 1 deletions
				
			
		| 
						 | 
				
			
			@ -5,6 +5,7 @@ import { Header, Menu, Scroll, config } from 'folds';
 | 
			
		|||
 | 
			
		||||
import * as css from './AutocompleteMenu.css';
 | 
			
		||||
import { preventScrollWithArrowKey, stopPropagation } from '../../../utils/keyboard';
 | 
			
		||||
import { useAlive } from '../../../hooks/useAlive';
 | 
			
		||||
 | 
			
		||||
type AutocompleteMenuProps = {
 | 
			
		||||
  requestClose: () => void;
 | 
			
		||||
| 
						 | 
				
			
			@ -12,13 +13,22 @@ type AutocompleteMenuProps = {
 | 
			
		|||
  children: ReactNode;
 | 
			
		||||
};
 | 
			
		||||
export function AutocompleteMenu({ headerContent, requestClose, children }: AutocompleteMenuProps) {
 | 
			
		||||
  const alive = useAlive();
 | 
			
		||||
 | 
			
		||||
  const handleDeactivate = () => {
 | 
			
		||||
    if (alive()) {
 | 
			
		||||
      // The component is unmounted so we will not call for `requestClose`
 | 
			
		||||
      requestClose();
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <div className={css.AutocompleteMenuBase}>
 | 
			
		||||
      <div className={css.AutocompleteMenuContainer}>
 | 
			
		||||
        <FocusTrap
 | 
			
		||||
          focusTrapOptions={{
 | 
			
		||||
            initialFocus: false,
 | 
			
		||||
            onDeactivate: () => requestClose(),
 | 
			
		||||
            onPostDeactivate: handleDeactivate,
 | 
			
		||||
            returnFocusOnDeactivate: false,
 | 
			
		||||
            clickOutsideDeactivates: true,
 | 
			
		||||
            allowOutsideClick: true,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue