Merge pull request #1801 from akksi/fix/table-w-dropdown-alignment

Fix Dash Table filter options position

Author: alexcjohnson

.circleci/config.yml

@@ -82,7 +82,7 @@ jobs:
   lint-unit-39: &lint-unit
     working_directory: ~/dash
     docker:
-      - image: circleci/python:3.9.2-buster-node-browsers
+      - image: circleci/python:3.9.4-node-browsers
         auth:
           username: dashautomation
           password: $DASH_PAT_DOCKERHUB

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>
+                    <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>
             </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,20 @@
     	}
 
 	    .dash-spreadsheet-inner {
-            .dash-header>div {
+            .dash-header>div,
+            .dash-filter>div {
                 display: flex;
+
+                input[type="text"] {
+                    flex: 1;
+                    line-height: unset;
+                    &::placeholder {
+                        font-size: 0.9em;
+                    }
+                }
+            }
+            .dash-filter>div {
+                flex-direction: row-reverse;
             }
             .column-actions {
                 display: flex;

components/dash-table/tests/selenium/test_markdown_link.py

@@ -50,11 +50,11 @@ def test_tmdl001_click_markdown_link(test, markdown_options, new_tab, cell_selec
         assert target.cell(0, "a").is_selected() == cell_selectable
 
         assert len(test.driver.window_handles) == 2
-        test.driver.switch_to_window(test.driver.window_handles[1])
+        test.driver.switch_to.window(test.driver.window_handles[1])
         assert test.driver.current_url.startswith("https://www.google.com")
 
         # Make sure the cell is still selected iff cell_selectable, after switching tabs
-        test.driver.switch_to_window(test.driver.window_handles[0])
+        test.driver.switch_to.window(test.driver.window_handles[0])
         assert target.cell(0, "a").is_selected() == cell_selectable
 
     else:

dash/testing/browser.py

@@ -20,6 +20,10 @@
     MoveTargetOutOfBoundsException,
 )
 
+from webdriver_manager.chrome import ChromeDriverManager
+from webdriver_manager.utils import ChromeType
+from webdriver_manager.firefox import GeckoDriverManager
+
 from dash.testing.wait import text_to_equal, style_to_equal, contains_text, until
 from dash.testing.dash_page import DashPageMixin
 from dash.testing.errors import DashAppLoadingError, BrowserError, TestingTimeoutError
@@ -473,7 +477,11 @@ def _get_chrome(self):
                 desired_capabilities=capabilities,
             )
             if self._remote
-            else webdriver.Chrome(options=options, desired_capabilities=capabilities)
+            else webdriver.Chrome(
+                ChromeDriverManager(chrome_type=ChromeType.GOOGLE).install(),
+                options=options,
+                desired_capabilities=capabilities,
+            )
         )
 
         # https://bugs.chromium.org/p/chromium/issues/detail?id=696481
@@ -516,7 +524,10 @@ def _get_firefox(self):
             )
             if self._remote
             else webdriver.Firefox(
-                firefox_profile=fp, options=options, capabilities=capabilities
+                executable_path=GeckoDriverManager().install(),
+                firefox_profile=fp,
+                options=options,
+                capabilities=capabilities,
             )
         )
 

requires-testing.txt

@@ -7,3 +7,4 @@ pytest>=6.0.2
 requests[security]>=2.21.0
 selenium>=3.141.0
 waitress>=1.4.4
+webdriver-manager>=3.5.1