[UnifiedSearch]: extract isSuggestionVisiable related class to outer …

…dom avoid re-render kql textarea
elastic · Sep 25, 2024 · 29fed4e · 29fed4e
1 parent b114dc5
commit 29fed4e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/plugins/unified_search/public/query_string_input/query_string_input.scss b/src/plugins/unified_search/public/query_string_input/query_string_input.scss
@@ -15,6 +15,11 @@
   overflow: visible !important; // Override EUI form control
   display: flex;
   flex: 1 1 100%;
+
+  &--withSuggestionVisible .kbnQueryBar__textarea {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
 }
 
 .kbnQueryBar__textarea {
@@ -43,12 +48,8 @@
     overflow-x: auto;
     overflow-y: auto;
     white-space: normal;
-    max-height: calc(80vh - 100px);
-  }
-
-  &.kbnQueryBar__textarea--isSuggestionsVisible {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+    max-height: calc(35vh - 100px);
+    min-height: $euiFormControlHeight;
   }
 
   ~.euiFormControlLayoutIcons {

diff --git a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx
@@ -796,10 +796,11 @@ export default class QueryStringInputUI extends PureComponent<QueryStringInputPr
       'kbnQueryBar__textarea--withIcon': this.props.iconType,
       'kbnQueryBar__textarea--isClearable': this.props.isClearable,
       'kbnQueryBar__textarea--withPrepend': prependElement,
-      'kbnQueryBar__textarea--isSuggestionsVisible':
+    });
+    const inputWrapClassName = classNames('kbnQueryBar__textareaWrap', {
+      'kbnQueryBar__textareaWrap--withSuggestionVisible':
         isSuggestionsVisible && !isEmpty(this.state.suggestions),
     });
-    const inputWrapClassName = classNames('kbnQueryBar__textareaWrap');
     return (
       <div className={containerClassName} onFocus={this.onFocusWithin} onBlur={this.onBlurWithin}>
         {prependElement}