Fix Dash Table filter options position

Author: akksi

components/dash-table/src/dash-table/components/Filter/Column.tsx

@@ -60,23 +60,25 @@ export default class ColumnFilter extends PureComponent<
                 data-dash-column={columnId}
                 style={style}
             >
-                <IsolatedInput
-                    onCopy={(e: any) => {
-                        e.stopPropagation();
-                        TableClipboardHelper.clearClipboard();
-                    }}
-                    onPaste={(e: any) => {
-                        e.stopPropagation();
-                    }}
-                    value={value}
-                    placeholder={'filter data...'}
-                    stopPropagation={true}
-                    submit={this.submit}
-                />
-                <FilterOptions
-                    filterOptions={filterOptions}
-                    toggleFilterOptions={toggleFilterOptions}
-                />
+                <div>
+                    <FilterOptions
+                        filterOptions={filterOptions}
+                        toggleFilterOptions={toggleFilterOptions}
+                    />
+                    <IsolatedInput
+                        onCopy={(e: any) => {
+                            e.stopPropagation();
+                            TableClipboardHelper.clearClipboard();
+                        }}
+                        onPaste={(e: any) => {
+                            e.stopPropagation();
+                        }}
+                        value={value}
+                        placeholder={'filter data...'}
+                        stopPropagation={true}
+                        submit={this.submit}
+                    />
+                </div>
             </th>
         );
     }

components/dash-table/src/dash-table/components/Table/Table.less

@@ -476,7 +476,6 @@
                 position: relative;
 
                 & input {
-                    position: absolute;
                     left: 0;
                     top: 0;
                     height: 100%;
@@ -687,8 +686,13 @@
     	}
 
 	    .dash-spreadsheet-inner {
-            .dash-header>div {
+            .dash-header>div,
+            .dash-filter>div {
                 display: flex;
+
+                input[type="text"] {
+                    flex: 1;
+                }
             }
             .column-actions {
                 display: flex;