Fix code bug (#6299)

* fix search ref bug * fix no global var * fix search mask open and keyEvent can use
haiwen · Jul 5, 2024 · e19c4c1 · e19c4c1
1 parent 149aab4
commit e19c4c1
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 31 deletions.
diff --git a/frontend/src/components/search/ai-search.js b/frontend/src/components/search/ai-search.js
@@ -132,16 +132,19 @@ export default class AISearch extends Component {
       if (this.inputRef && this.inputRef.current) {
         this.inputRef.current.focus();
       }
-    } else if (isHotkey('esc', e)) {
-      e.preventDefault();
-      this.inputRef && this.inputRef.current && this.inputRef.current.blur();
-      this.resetToDefault();
-    } else if (isHotkey('enter', e)) {
-      this.onEnter(e);
-    } else if (isHotkey('up', e)) {
-      this.onUp(e);
-    } else if (isHotkey('down', e)) {
-      this.onDown(e);
+    }
+    if (this.state.isMaskShow) {
+      if (isHotkey('esc', e)) {
+        e.preventDefault();
+        this.inputRef && this.inputRef.current && this.inputRef.current.blur();
+        this.resetToDefault();
+      } else if (isHotkey('enter', e)) {
+        this.onEnter(e);
+      } else if (isHotkey('up', e)) {
+        this.onUp(e);
+      } else if (isHotkey('down', e)) {
+        this.onDown(e);
+      }
     }
   };
 
@@ -660,7 +663,7 @@ export default class AISearch extends Component {
     return (
       <>
         <MediaQuery query="(min-width: 768px)">
-          <div className="search-result-list-container">{results}</div>
+          <div className="search-result-list-container" ref={this.searchResultListContainerRef}>{results}</div>
         </MediaQuery>
         <MediaQuery query="(max-width: 767.8px)">
           {results}

diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
@@ -94,16 +94,19 @@ class Search extends Component {
       if (this.inputRef && this.inputRef.current) {
         this.inputRef.current.focus();
       }
-    } else if (isHotkey('esc', e)) {
-      e.preventDefault();
-      this.inputRef && this.inputRef.current && this.inputRef.current.blur();
-      this.resetToDefault();
-    } else if (isEnter(e)) {
-      this.onEnter(e);
-    } else if (isUp(e)) {
-      this.onUp(e);
-    } else if (isDown(e)) {
-      this.onDown(e);
+    }
+    if (this.state.isMaskShow) {
+      if (isHotkey('esc', e)) {
+        e.preventDefault();
+        this.inputRef && this.inputRef.current && this.inputRef.current.blur();
+        this.resetToDefault();
+      } else if (isEnter(e)) {
+        this.onEnter(e);
+      } else if (isUp(e)) {
+        this.onUp(e);
+      } else if (isDown(e)) {
+        this.onDown(e);
+      }
     }
   };
 

diff --git a/...end/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx b/...end/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx
@@ -823,7 +823,6 @@ class RecordsGroupBody extends Component {
             groupOffsetLeft={groupOffsetLeft}
             scrollLeft={scrollLeft}
             leftBarWidth={0}
-            appNavWidth={0}
             columns={columns}
             summaryConfigs={summaryConfigs}
             isExpanded={isExpanded}

diff --git a/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js b/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js
@@ -489,11 +489,6 @@ class InteractionMasks extends React.Component {
     this.closeEditor();
   };
 
-  getEditorContainer = () => {
-    // todo
-    return null;
-  };
-
   onKeyDown = (e) => {
     const keyCode = e.keyCode;
     if (isCtrlKeyHeldDown(e)) {
@@ -874,14 +869,12 @@ class InteractionMasks extends React.Component {
     const rect = cellContainer.getBoundingClientRect();
     const leftInterval = this.getLeftInterval();
     const nextColumnWidth = columns[current.idx - 1] ? columns[current.idx - 1].width : 0;
-    const appNavWidth = window.app.state.appNavWidth || 0;
-    const appLeftBarWidth = parseInt(appNavWidth) + 130;
     // selectMask is outside the viewport, scroll to next column
     if (rect.x < 0 || rect.x > window.innerWidth) {
       this.props.scrollToColumn(current.idx - 1);
-    } else if (nextColumnWidth > rect.x - leftInterval - appLeftBarWidth) {
+    } else if (nextColumnWidth > rect.x - leftInterval) {
       // selectMask is part of the viewport, newScrollLeft = columnWidth - visibleWidth
-      const newScrollLeft = nextColumnWidth - (rect.x - leftInterval - appLeftBarWidth);
+      const newScrollLeft = nextColumnWidth - (rect.x - leftInterval);
       this.props.setRecordsScrollLeft(this.props.getScrollLeft() - newScrollLeft);
     }
     return ({ ...current, idx: current.idx === 0 ? 0 : current.idx - 1 });