chore: This would do it

cloudscape-design · Sep 13, 2023 · 4f46fb7 · 4f46fb7
1 parent 03e59f2
commit 4f46fb7
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 26 deletions.
diff --git a/pages/autosuggest/simple.page.tsx b/pages/autosuggest/simple.page.tsx
@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import Autosuggest from '~components/autosuggest';
 
-const empty = <span>Nothing found</span>;
+const empty = undefined;
 const options = [
   { value: 'Option 0', tags: ['tag1', 'tag2'], filteringTags: ['bla', 'opt'], description: 'description1' },
   { value: 'Option 1', labelTag: 'This is a label tag' },
@@ -14,7 +14,7 @@ const enteredTextLabel = (value: string) => `Use: ${value}`;
 export default function AutosuggestPage() {
   const [value, setValue] = useState('');
   const [readOnly, setReadOnly] = useState(false);
-  const [hasOptions, setHasOptions] = useState(true);
+  const [hasOptions, setHasOptions] = useState(false);
 
   return (
     <div style={{ padding: 10 }}>

diff --git a/src/autosuggest/internal.tsx b/src/autosuggest/internal.tsx
@@ -180,7 +180,7 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
     onRecoveryClick: handleRecoveryClick,
     filteringResultsText: filteredText,
   });
-
+  console.log({ isEmpty });
   return (
     <AutosuggestInput
       {...restProps}
@@ -202,6 +202,7 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
       ariaLabel={ariaLabel}
       ariaRequired={ariaRequired}
       clearAriaLabel={clearAriaLabel}
+      isEmpty={isEmpty && !dropdownStatus.content}
       disableBrowserAutocorrect={disableBrowserAutocorrect}
       expandToViewport={expandToViewport}
       ariaControls={listId}

diff --git a/src/internal/components/autosuggest-input/index.tsx b/src/internal/components/autosuggest-input/index.tsx
@@ -91,6 +91,7 @@ const AutosuggestInput = React.forwardRef(
       onPressArrowDown,
       onPressArrowUp,
       onPressEnter,
+      isEmpty,
       __internalRootRef,
       ...restProps
     }: AutosuggestInputProps,
@@ -249,7 +250,6 @@ const AutosuggestInput = React.forwardRef(
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
-
     return (
       <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>
         <Dropdown
@@ -259,6 +259,7 @@ const AutosuggestInput = React.forwardRef(
           contentKey={dropdownContentKey}
           onFocus={handleFocus}
           onBlur={handleBlur}
+          isEmpty={isEmpty}
           trigger={
             <InternalInput
               type="visualSearch"
@@ -279,7 +280,7 @@ const AutosuggestInput = React.forwardRef(
             />
           }
           onMouseDown={handleDropdownMouseDown}
-          open={open && !!dropdownContent}
+          open={true}
           footer={
             dropdownFooterRef && (
               <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>

diff --git a/src/internal/components/dropdown/index.tsx b/src/internal/components/dropdown/index.tsx
@@ -91,16 +91,18 @@ const TransitionContent = ({
   role,
   ariaLabelledby,
   ariaDescribedby,
+  isEmpty,
 }: TransitionContentProps) => {
   const contentRef = useMergeRefs(dropdownRef, transitionRef);
+  console.log({ header, children, isEmpty });
   return (
     <div
       className={clsx(styles.dropdown, dropdownClasses, {
         [styles.open]: open,
         [styles['with-limited-width']]: !stretchWidth,
         [styles['hide-upper-border']]: stretchWidth,
         [styles.interior]: interior,
-        [styles['is-empty']]: !header && !children,
+        // [styles['is-empty']]: !header && !children,
         [styles.refresh]: isRefresh,
         [styles['use-portal']]: expandToViewport && !interior,
         [styles['stretch-beyond-trigger-width']]: stretchBeyondTriggerWidth,
@@ -116,15 +118,19 @@ const TransitionContent = ({
       style={stretchBeyondTriggerWidth ? { maxWidth: defaultMaxDropdownWidth } : {}}
       onMouseDown={onMouseDown}
     >
-      <div className={clsx(styles['dropdown-content-wrapper'], isRefresh && styles.refresh)}>
-        <div className={styles['ie11-wrapper']}>
-          <div ref={verticalContainerRef} className={styles['dropdown-content']}>
-            <DropdownContextProvider position={position}>
-              {header}
-              {children}
-              {footer}
-            </DropdownContextProvider>
-          </div>
+      <div
+        className={clsx(
+          styles['dropdown-content-wrapper'],
+          !header && isEmpty && styles['is-empty'],
+          isRefresh && styles.refresh
+        )}
+      >
+        <div ref={verticalContainerRef} className={styles['dropdown-content']}>
+          <DropdownContextProvider position={position}>
+            {header}
+            {children}
+            {footer}
+          </DropdownContextProvider>
         </div>
       </div>
     </div>
@@ -158,6 +164,7 @@ const Dropdown = ({
   dropdownContentRole,
   ariaLabelledby,
   ariaDescribedby,
+  isEmpty,
 }: DropdownProps) => {
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLDivElement | null>(null);
@@ -426,6 +433,7 @@ const Dropdown = ({
                 role={dropdownContentRole}
                 ariaLabelledby={ariaLabelledby}
                 ariaDescribedby={ariaDescribedby}
+                isEmpty={isEmpty}
               >
                 {children}
               </TransitionContent>

diff --git a/src/internal/components/dropdown/styles.scss b/src/internal/components/dropdown/styles.scss
@@ -49,6 +49,11 @@
     }
 
     border-bottom: none;
+
+    // Don't show dropdown border when there's no dropdown content
+    &.is-empty::after {
+      display: none;
+    }
   }
 
   &-drop-up {
@@ -96,10 +101,6 @@
       overflow: scroll;
     }
   }
-  // Don't show dropdown border when there's no dropdown content
-  &.is-empty::after {
-    display: none;
-  }
 }
 
 .dropdown-content {
@@ -108,13 +109,6 @@
   width: 100%;
 }
 
-// Child flex wrapper used because when combining an absolute position
-// and flexbox, IE11 will incorrectly size the container according to its parent
-// and not its content.
-.ie11-wrapper {
-  display: flex;
-}
-
 .stretch-trigger-height {
   height: 100%;
 }