From 4fe48d16462d489b41fb3916ed26e3d10659c1e1 Mon Sep 17 00:00:00 2001
From: Hoang Thuan Pham <hoang.pham@calian.ca>
Date: Fri, 17 Jun 2022 10:22:49 -0400
Subject: [PATCH] Fix css positioning for filter text box icon

Currently, the filter icon of the filter text box stays fixed
at the top left of the filter tree, even when the filter text
box is out of sight when users scroll down the tree. This commit
fixes this issue by setting the position css property of the
parent div of the filter text box to relative, so that the filter
icon is positioned relatively to the parent container and stays
attached to the filter text box.

Signed-off-by: Hoang Thuan Pham <hoang.pham@calian.ca>
---
 .../__tests__/__snapshots__/entry-tree.test.tsx.snap     | 9 +--------
 .../src/components/utils/filter-tree/filter.tsx          | 2 +-
 .../react-components/style/output-components-style.css   | 4 ++++
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/react-components/src/components/utils/filter-tree/__tests__/__snapshots__/entry-tree.test.tsx.snap b/packages/react-components/src/components/utils/filter-tree/__tests__/__snapshots__/entry-tree.test.tsx.snap
index 37770c9e5..11c407912 100644
--- a/packages/react-components/src/components/utils/filter-tree/__tests__/__snapshots__/entry-tree.test.tsx.snap
+++ b/packages/react-components/src/components/utils/filter-tree/__tests__/__snapshots__/entry-tree.test.tsx.snap
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-
 exports[`Empty tree 1`] = `
 <span>
   
 </span>
 `;
-
 exports[`Entry with children All unchecked 1`] = `
 <div>
   <table
@@ -358,7 +356,6 @@ exports[`Entry with children All unchecked 1`] = `
   </table>
 </div>
 `;
-
 exports[`Entry with children Check one grandchild 1`] = `
 <div>
   <table
@@ -711,7 +708,6 @@ exports[`Entry with children Check one grandchild 1`] = `
   </table>
 </div>
 `;
-
 exports[`Entry with children Collapse one child 1`] = `
 <div>
   <table
@@ -962,10 +958,10 @@ exports[`Entry with children Collapse one child 1`] = `
   </table>
 </div>
 `;
-
 exports[`Entry with children With filter element 1`] = `
 Array [
   <div
+    id="input-filter-container"
     onChange={[Function]}
   >
     <i
@@ -1335,7 +1331,6 @@ Array [
   </div>,
 ]
 `;
-
 exports[`one level of entries 1`] = `
 <div>
   <table
@@ -1441,7 +1436,6 @@ exports[`one level of entries 1`] = `
   </table>
 </div>
 `;
-
 exports[`one level of entries 2`] = `
 <div>
   <table
@@ -1601,7 +1595,6 @@ exports[`one level of entries 2`] = `
   </table>
 </div>
 `;
-
 exports[`one level of entries 3`] = `
 <div>
   <table
diff --git a/packages/react-components/src/components/utils/filter-tree/filter.tsx b/packages/react-components/src/components/utils/filter-tree/filter.tsx
index a4fb99fc7..28df5decd 100644
--- a/packages/react-components/src/components/utils/filter-tree/filter.tsx
+++ b/packages/react-components/src/components/utils/filter-tree/filter.tsx
@@ -37,7 +37,7 @@ export class Filter extends React.Component<FilterProps, FilterState> {
     }
 
     render(): JSX.Element {
-        return <div ref={this.ref} onChange={this.props.onChange}>
+        return <div ref={this.ref} onChange={this.props.onChange} id="input-filter-container">
             <i id="input-filter-icon" className='codicon codicon-filter'></i>
             <input
                 id="input-filter-tree"
diff --git a/packages/react-components/style/output-components-style.css b/packages/react-components/style/output-components-style.css
index 9b206be22..65c7c91c3 100644
--- a/packages/react-components/style/output-components-style.css
+++ b/packages/react-components/style/output-components-style.css
@@ -296,6 +296,10 @@ canvas {
     border: 0px; 
 }
 
+#input-filter-container {
+    position: relative;
+}
+
 #input-filter-icon {
     position: absolute;
     top: 5px;