Fix displaying bugs

elastic · Aug 17, 2020 · 56c5baf · 56c5baf
1 parent 5ad3ae1
commit 56c5baf
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 22 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
@@ -102,7 +102,7 @@ export class QueryStringInputUI extends Component<Props, State> {
   private abortController?: AbortController;
   private services = this.props.kibana.services;
   private componentIsUnmounting = false;
-  private queryBarDivRefInstance: RefObject<HTMLDivElement> = createRef();
+  private queryBarInputDivRefInstance: RefObject<HTMLDivElement> = createRef();
 
   private getQueryString = () => {
     return toUser(this.props.query.query);
@@ -575,10 +575,7 @@ export class QueryStringInputUI extends Component<Props, State> {
     const ariaCombobox = { ...isSuggestionsVisible, role: 'combobox' };
 
     return (
-      <div
-        className="euiFormControlLayout euiFormControlLayout--group kbnQueryBar__wrap"
-        ref={this.queryBarDivRefInstance}
-      >
+      <div className="euiFormControlLayout euiFormControlLayout--group kbnQueryBar__wrap">
         {this.props.prepend}
         <EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
           <div
@@ -594,6 +591,7 @@ export class QueryStringInputUI extends Component<Props, State> {
             <div
               role="search"
               className="euiFormControlLayout__childrenWrapper kuiLocalSearchAssistedInput"
+              ref={this.queryBarInputDivRefInstance}
             >
               <EuiTextArea
                 placeholder={
@@ -640,23 +638,22 @@ export class QueryStringInputUI extends Component<Props, State> {
                 {this.getQueryString()}
               </EuiTextArea>
             </div>
+            <EuiPortal>
+              <SuggestionsComponent
+                show={this.state.isSuggestionsVisible}
+                suggestions={this.state.suggestions.slice(0, this.state.suggestionLimit)}
+                index={this.state.index}
+                onClick={this.onClickSuggestion}
+                onMouseEnter={this.onMouseEnterSuggestion}
+                loadMore={this.increaseLimit}
+                closeList={this.closeSuggestionsList}
+                queryBarInputDivRef={this.queryBarInputDivRefInstance}
+                dropdownHeight={this.props.dropdownHeight}
+              />
+            </EuiPortal>
           </div>
         </EuiOutsideClickDetector>
 
-        <EuiPortal>
-          <SuggestionsComponent
-            show={this.state.isSuggestionsVisible}
-            suggestions={this.state.suggestions.slice(0, this.state.suggestionLimit)}
-            index={this.state.index}
-            onClick={this.onClickSuggestion}
-            onMouseEnter={this.onMouseEnterSuggestion}
-            loadMore={this.increaseLimit}
-            closeList={this.closeSuggestionsList}
-            queryBarRect={this.queryBarDivRefInstance.current?.getBoundingClientRect()}
-            dropdownHeight={this.props.dropdownHeight}
-          />
-        </EuiPortal>
-
         <QueryLanguageSwitcher
           language={this.props.query.language}
           anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}

diff --git a/src/plugins/data/public/ui/typeahead/suggestions_component.test.tsx b/src/plugins/data/public/ui/typeahead/suggestions_component.test.tsx
@@ -55,6 +55,7 @@ describe('SuggestionsComponent', () => {
         suggestions={mockSuggestions}
         loadMore={noop}
         closeList={noop}
+        queryBarInputDivRef={{} as React.RefObject<HTMLDivElement>}
       />
     );
 
@@ -71,6 +72,7 @@ describe('SuggestionsComponent', () => {
         suggestions={[]}
         loadMore={noop}
         closeList={noop}
+        queryBarInputDivRef={{} as React.RefObject<HTMLDivElement>}
       />
     );
 
@@ -87,6 +89,7 @@ describe('SuggestionsComponent', () => {
         suggestions={mockSuggestions}
         loadMore={noop}
         closeList={noop}
+        queryBarInputDivRef={{} as React.RefObject<HTMLDivElement>}
       />
     );
 
@@ -104,6 +107,7 @@ describe('SuggestionsComponent', () => {
         suggestions={mockSuggestions}
         loadMore={noop}
         closeList={noop}
+        queryBarInputDivRef={{} as React.RefObject<HTMLDivElement>}
       />
     );
 
@@ -121,6 +125,7 @@ describe('SuggestionsComponent', () => {
         suggestions={mockSuggestions}
         loadMore={noop}
         closeList={noop}
+        queryBarInputDivRef={{} as React.RefObject<HTMLDivElement>}
       />
     );
 
@@ -140,6 +145,7 @@ describe('SuggestionsComponent', () => {
         suggestions={mockSuggestions}
         loadMore={noop}
         closeList={noop}
+        queryBarInputDivRef={{} as React.RefObject<HTMLDivElement>}
       />
     );
 

diff --git a/src/plugins/data/public/ui/typeahead/suggestions_component.tsx b/src/plugins/data/public/ui/typeahead/suggestions_component.tsx
@@ -35,7 +35,7 @@ interface Props {
   suggestions: QuerySuggestion[];
   loadMore: () => void;
   closeList: () => void;
-  queryBarRect?: DOMRect;
+  queryBarInputDivRef: RefObject<HTMLDivElement>;
   dropdownHeight?: string;
 }
 
@@ -47,7 +47,7 @@ export class SuggestionsComponent extends Component<Props> {
 
   updatePosition = () => {
     const kbnTypeaheadDiv = this.kbnTypeaheadDivRefInstance.current;
-    const { queryBarRect } = this.props;
+    const queryBarRect = this.props.queryBarInputDivRef.current?.getBoundingClientRect();
 
     if (queryBarRect && kbnTypeaheadDiv) {
       const documentHeight = document.documentElement.clientHeight || window.innerHeight;
@@ -80,8 +80,10 @@ export class SuggestionsComponent extends Component<Props> {
     }
 
     const suggestions = this.props.suggestions.map((suggestion, index) => {
+      const queryBarInputDiv = this.props.queryBarInputDivRef.current;
       const isDescriptionFittable = Boolean(
-        this.props.queryBarRect && this.props.queryBarRect.width >= suggestionsListRequiredWidth
+        queryBarInputDiv &&
+          queryBarInputDiv.getBoundingClientRect().width >= suggestionsListRequiredWidth
       );
 
       return (