Fix #2615 - allow special characters in dash-table column IDs

Author: alexcjohnson

components/dash-table/src/dash-table/components/ControlledTable/index.tsx

@@ -177,7 +177,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
                     active.row !== active_cell?.row)
             ) {
                 const target = this.$el.querySelector(
-                    `td[data-dash-row="${active_cell.row}"][data-dash-column="${active_cell.column_id}"]:not(.phantom-cell)`
+                    `td[data-dash-row="${
+                        active_cell.row
+                    }"][data-dash-column="${CSS.escape(
+                        active_cell.column_id
+                    )}"]:not(.phantom-cell)`
                 ) as HTMLElement;
                 if (target) {
                     target.focus();
@@ -1170,10 +1174,14 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
                 ? table.querySelector(
                       `tr:nth-of-type(${
                           row + 1
-                      }) th[data-dash-column="${id}"]:not(.phantom-cell)`
+                      }) th[data-dash-column="${CSS.escape(
+                          id
+                      )}"]:not(.phantom-cell)`
                   )
                 : table.querySelector(
-                      `td[data-dash-column="${id}"][data-dash-row="${row}"]:not(.phantom-cell)`
+                      `td[data-dash-column="${CSS.escape(
+                          id
+                      )}"][data-dash-row="${row}"]:not(.phantom-cell)`
                   );
 
             (this.refs.tooltip as TableTooltip).updateBounds(cell);

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

@@ -267,3 +267,30 @@ def test_colm008_top_row_by_subset(test):
         for r in range(3):
             if target.column(c).exists(r):
                 assert target.column(c).is_selected(r)
+
+
+def test_colm009_newline_id(test):
+    app = dash.Dash(__name__)
+
+    columns = [
+        {"name": "aaabbb", "id": "aaa\nbbb"},
+        {"name": "cccddd", "id": "ccc\nddd"},
+    ]
+    data = [{columns[c]["id"]: r + (3 * c) + 1 for c in [0, 1]} for r in [0, 1, 2]]
+    tooltip_data = [{k: str(v * 11) for k, v in row.items()} for row in data]
+
+    app.layout = DataTable(
+        id="table", columns=columns, data=data, tooltip_data=tooltip_data
+    )
+
+    test.start_server(app)
+
+    target = test.table("table")
+    cell = target.cell(1, 1)
+
+    target.is_ready()
+    cell.move_to()
+    # note first I tried tooltip.exists() and tooltip.get_text() like in ttip001
+    # but that didn't work? didn't wait for it perhaps?
+    test.wait_for_text_to_equal(".dash-tooltip", "55")
+    assert test.get_log_errors() == []

dash/_jupyter.py

@@ -403,7 +403,7 @@ def wait_for_app():
     @staticmethod
     def _display_in_colab(dashboard_url, port, mode, width, height):
         # noinspection PyUnresolvedReferences
-        from google.colab import output  # pylint: disable=E0401,C0415
+        from google.colab import output  # pylint: disable=E0401,E0611,C0415
 
         if mode == "inline":
             output.serve_kernel_port_as_iframe(port, width=width, height=height)