From bdfc0fec71e359ff7cb0821fe2fe4e5fa93af00c Mon Sep 17 00:00:00 2001
From: witt <unix.bio@gmail.com>
Date: Fri, 28 May 2021 15:18:21 +0800
Subject: [PATCH] fix(auto-complete): hide shadow when no content (#547)

---
 components/auto-complete/auto-complete-dropdown.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/auto-complete/auto-complete-dropdown.tsx b/components/auto-complete/auto-complete-dropdown.tsx
index 5f51550..63018db 100644
--- a/components/auto-complete/auto-complete-dropdown.tsx
+++ b/components/auto-complete/auto-complete-dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react'
+import React, { CSSProperties, useMemo } from 'react'
 import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import { useAutoCompleteContext } from './auto-complete-context'
@@ -24,6 +24,9 @@ const AutoCompleteDropdown: React.FC<
 > = ({ children, visible, className, dropdownStyle, disableMatchWidth }) => {
   const theme = useTheme()
   const { ref } = useAutoCompleteContext()
+  const isEmpty = useMemo(() => {
+    return !visible || React.Children.count(children) === 0
+  }, [children, visible])
   const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault()
     event.stopPropagation()
@@ -40,7 +43,7 @@ const AutoCompleteDropdown: React.FC<
         <style jsx>{`
           .auto-complete-dropdown {
             border-radius: ${theme.layout.radius};
-            box-shadow: ${theme.expressiveness.shadowLarge};
+            box-shadow: ${isEmpty ? 'none' : theme.expressiveness.shadowLarge};
             background-color: ${theme.palette.background};
             overflow-y: auto;
             max-height: 15rem;