Replace dropdownHeight with className

elastic · Aug 19, 2020 · dbf868a · dbf868a
1 parent 242e774
commit dbf868a
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 36 deletions.
diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -60,7 +60,7 @@ interface Props {
   onChangeQueryInputFocus?: (isFocused: boolean) => void;
   onSubmit?: (query: Query) => void;
   dataTestSubj?: string;
-  dropdownHeight?: string;
+  className?: string;
 }
 
 interface State {
@@ -645,7 +645,7 @@ export class QueryStringInputUI extends Component<Props, State> {
                 onMouseEnter={this.onMouseEnterSuggestion}
                 loadMore={this.increaseLimit}
                 queryBarInputDivRef={this.queryBarInputDivRefInstance}
-                dropdownHeight={this.props.dropdownHeight}
+                className={this.props.className}
               />
             </EuiPortal>
           </div>

diff --git a/src/plugins/data/public/ui/typeahead/_suggestion.scss b/src/plugins/data/public/ui/typeahead/_suggestion.scss
@@ -6,12 +6,17 @@ $kbnTypeaheadTypes: (
   conjunction: $euiColorVis3,
 );
 
+.kbnTypeahead.kbnTypeahead--small {
+  max-height: 20vh;
+}
+
 .kbnTypeahead {
-  position: relative;
-  opacity: 0;
+  position: absolute;
+  max-height: 60vh;
 
   .kbnTypeahead__popover {
     max-height: inherit;
+    @include euiScrollBar;
     @include euiBottomShadow($adjustBorders: true);
     border: 1px solid;
     border-color: $euiBorderColor;
@@ -24,10 +29,6 @@ $kbnTypeaheadTypes: (
     border-bottom-right-radius: $euiBorderRadius;
     overflow-y: auto;
 
-    .kbnTypeahead__items {
-      @include euiScrollBar;
-    }
-
     .kbnTypeahead__item {
       height: $euiSizeXL;
       white-space: nowrap;

diff --git a/src/plugins/data/public/ui/typeahead/constants.ts b/src/plugins/data/public/ui/typeahead/constants.ts
@@ -18,5 +18,4 @@
  */
 
 export const suggestionsListOffsetBottom = 20;
-export const suggestionsListDefaultMaxHeight = '60vh';
 export const suggestionsListRequiredWidth = 600;
diff --git a/src/plugins/data/public/ui/typeahead/suggestions_component.tsx b/src/plugins/data/public/ui/typeahead/suggestions_component.tsx
@@ -19,13 +19,10 @@
 
 import { isEmpty } from 'lodash';
 import React, { Component, createRef, RefObject } from 'react';
+import classNames from 'classnames';
 import { QuerySuggestion } from '../../autocomplete';
 import { SuggestionComponent } from './suggestion_component';
-import {
-  suggestionsListDefaultMaxHeight,
-  suggestionsListOffsetBottom,
-  suggestionsListRequiredWidth,
-} from './constants';
+import { suggestionsListOffsetBottom, suggestionsListRequiredWidth } from './constants';
 
 interface Props {
   index: number | null;
@@ -35,7 +32,7 @@ interface Props {
   suggestions: QuerySuggestion[];
   loadMore: () => void;
   queryBarInputDivRef: RefObject<HTMLDivElement>;
-  dropdownHeight?: string;
+  className?: string;
 }
 
 export class SuggestionsComponent extends Component<Props> {
@@ -61,15 +58,11 @@ export class SuggestionsComponent extends Component<Props> {
             suggestionsListOffsetBottom) >
         0;
 
-      kbnTypeaheadDiv.style.position = 'absolute';
       kbnTypeaheadDiv.style.left = `${queryBarRect.left}px`;
       kbnTypeaheadDiv.style.width = `${queryBarRect.width}px`;
       kbnTypeaheadDiv.style.top = isSuggestionsListFittable
-        ? `${window.scrollY + queryBarRect.top + queryBarRect.height}px`
+        ? `${window.scrollY + queryBarRect.bottom}px`
         : `${window.scrollY + queryBarRect.top - suggestionsListHeight}px`;
-      kbnTypeaheadDiv.style.maxHeight =
-        this.props.dropdownHeight || suggestionsListDefaultMaxHeight;
-      kbnTypeaheadDiv.style.opacity = '1';
     }
   };
 
@@ -100,18 +93,18 @@ export class SuggestionsComponent extends Component<Props> {
     });
 
     return (
-      <div className="reactSuggestionTypeahead">
-        <div className="kbnTypeahead" ref={this.kbnTypeaheadDivRefInstance}>
-          <div className="kbnTypeahead__popover">
-            <div
-              id="kbnTypeahead__items"
-              className="kbnTypeahead__items"
-              role="listbox"
-              ref={(node) => (this.parentNode = node)}
-              onScroll={this.handleScroll}
-            >
-              {suggestions}
-            </div>
+      <div
+        className={classNames('kbnTypeahead', this.props.className)}
+        ref={this.kbnTypeaheadDivRefInstance}
+      >
+        <div className="kbnTypeahead__popover">
+          <div
+            id="kbnTypeahead__items"
+            role="listbox"
+            ref={(node) => (this.parentNode = node)}
+            onScroll={this.handleScroll}
+          >
+            {suggestions}
           </div>
         </div>
       </div>
@@ -163,7 +156,7 @@ export class SuggestionsComponent extends Component<Props> {
     }
   };
 
-  closeListOnScroll = (event: Event) => {
+  updateListPositionOnScroll = (event: Event) => {
     // Close the list when a scroll event happens, but not if the scroll happened in the suggestions list.
     // This mirrors Firefox's approach of auto-closing `select` elements onscroll.
     if (
@@ -180,7 +173,7 @@ export class SuggestionsComponent extends Component<Props> {
     window.addEventListener('resize', this.updatePosition);
 
     setTimeout(() => {
-      window.addEventListener('scroll', this.closeListOnScroll, {
+      window.addEventListener('scroll', this.updateListPositionOnScroll, {
         passive: true, // for better performance as we won't call preventDefault
         capture: true, // scroll events don't bubble, they must be captured instead
       });
@@ -189,7 +182,7 @@ export class SuggestionsComponent extends Component<Props> {
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.updatePosition);
-    window.removeEventListener('scroll', this.closeListOnScroll, {
+    window.removeEventListener('scroll', this.updateListPositionOnScroll, {
       capture: true,
     });
   }

diff --git a/src/plugins/vis_default_editor/public/components/controls/filter.tsx b/src/plugins/vis_default_editor/public/components/controls/filter.tsx
@@ -110,7 +110,7 @@ function FilterRow({
           dataTestSubj={dataTestSubj}
           bubbleSubmitEvent={true}
           languageSwitcherPopoverAnchorPosition="leftDown"
-          dropdownHeight="20vh"
+          className="kbnTypeahead--small"
         />
       </EuiFormRow>
       {showCustomLabel ? (