ctrl+click opens new tab when using clickable

object_database/web/cells/button.py

@@ -49,9 +49,14 @@ def onMessage(self, msgFrame):
         self.parent.childHadUserAction(self, self)
 
         if isinstance(redirectValue, str):
-            self.scheduleMessage(
-                {"action": "redirect", "url": redirectValue, "target": self.target}
-            )
+            if msgFrame.get("event") == "ctrlClick":
+                self.scheduleMessage(
+                    {"action": "redirect", "url": redirectValue, "target": "_blank"}
+                )
+            else:
+                self.scheduleMessage(
+                    {"action": "redirect", "url": redirectValue, "target": self.target}
+                )
 
 
 class Button(Clickable):

object_database/web/cells_demo/clickable.py

@@ -15,6 +15,9 @@
 from object_database.web import cells as cells
 from object_database.web.CellsTestPage import CellsTestPage
 
+from selenium.webdriver import ActionChains
+from selenium.webdriver.common.keys import Keys
+
 
 class ClickableText(CellsTestPage):
     def cell(self):
@@ -43,7 +46,8 @@ def test_clickable_clicking_works(headless_browser):
     demo_root.click()
     headless_browser.wait(2).until(
         headless_browser.expect.text_to_be_present_in_element(
-            (headless_browser.by.CSS_SELECTOR, query), "You've clicked on this text 1 times"
+            (headless_browser.by.CSS_SELECTOR, query),
+            "You've clicked on this text 1 times",
         )
     )
 
@@ -89,3 +93,85 @@ def cell(self):
 
     def text(self):
         return "You should see a clickable with highlighted text under it."
+
+
+class LinkTextCtrlClick(CellsTestPage):
+    def cell(self):
+        slot = cells.Slot(0)
+        return cells.Clickable(
+            "www.google.com", lambda: "https://www.google.com"
+        ) + cells.Button(
+            cells.Subscribed(lambda: f"Clicked {slot.get()} times"),
+            lambda: slot.set(slot.get() + 1),
+        )
+
+    def text(self):
+        return (
+            "You should see some link-text that opens in the same tab. Clicking "
+            + "while holding the CTRL key will open the link in a new tab. "
+            + "Control-clicking the button will work as normal."
+        )
+
+
+def test_click_opens_in_new_tab(headless_browser):
+    # Close all other windows
+    for window in headless_browser.window_handles[1:]:
+        headless_browser.switch_to_window(window)
+        headless_browser.close()
+    headless_browser.switch_to_window(headless_browser.window_handles[0])
+    assert len(headless_browser.window_handles) == 1
+
+    # clicking opens in the same tab
+    demo_root = headless_browser.get_demo_root_for(LinkTextCtrlClick)
+    assert demo_root
+    assert demo_root.get_attribute("data-cell-type") == "Sequence"
+    query = "[data-cell-type='Clickable']"
+    link = headless_browser.find_by_css(query)
+    assert link.text == "www.google.com"
+    assert len(headless_browser.window_handles) == 1
+    link.click()
+    headless_browser.wait(10).until(headless_browser.expect.number_of_windows_to_be(1))
+    assert len(headless_browser.window_handles) == 1
+    assert headless_browser.current_url == "https://www.google.com/"
+
+    # ctrl clicking opens in a new tab
+    demo_root = headless_browser.get_demo_root_for(LinkTextCtrlClick)
+    assert demo_root
+    assert demo_root.get_attribute("data-cell-type") == "Sequence"
+    query = "[data-cell-type='Clickable']"
+    link = headless_browser.find_by_css(query)
+    assert link.text == "www.google.com"
+    action = ActionChains(headless_browser.webdriver)
+    action.key_down(Keys.CONTROL).click(link).key_up(Keys.CONTROL).perform()
+    headless_browser.wait(10).until(headless_browser.expect.number_of_windows_to_be(2))
+    assert len(headless_browser.window_handles) == 2
+    headless_browser.switch_to_window(headless_browser.window_handles[1])
+    assert headless_browser.current_url == "https://www.google.com/"
+
+    # cleanup
+    for window in headless_browser.window_handles[1:]:
+        headless_browser.switch_to_window(window)
+        headless_browser.close()
+    headless_browser.switch_to_window(headless_browser.window_handles[0])
+    assert len(headless_browser.window_handles) == 1
+
+
+def test_control_click_doesnt_affect_buttons(headless_browser):
+    """control-clicking bumps the slot, but doesn't open new tabs."""
+    query = "[data-cell-type='Button']"
+
+    button = headless_browser.find_by_css(query)
+    assert button.text == "Clicked 0 times"
+
+    # ctrl+click
+    action = ActionChains(headless_browser.webdriver)
+    action.key_down(Keys.CONTROL).click(button).key_up(Keys.CONTROL).perform()
+
+    headless_browser.wait(2).until(
+        headless_browser.expect.text_to_be_present_in_element(
+            (headless_browser.by.CSS_SELECTOR, query), "Clicked 1 times"
+        )
+    )
+
+    # no new tab generated
+    assert len(headless_browser.window_handles) == 1

object_database/web/cells_demo/conftest.py

@@ -166,7 +166,7 @@ def bootup_webdriver():
     # options.binary_location = '/usr/bin/google-chrome'
     # driver = webdriver.Chrome(executable_path=chrome_path, chrome_options=options)
 
-    # start upu the driver
+    # start up the driver
     driver = webdriver.Chrome(
         options=options, desired_capabilities={"goog:loggingPrefs": {"browser": "ALL"}}
     )
@@ -349,6 +349,9 @@ def current_url(self):
     def switch_to_window(self, handle):
         return self.webdriver.switch_to.window(handle)
 
+    def close(self):
+        return self.webdriver.close()
+
 
 @pytest.fixture(scope="session")
 def headless_browser():

object_database/web/content/src/components/Clickable.js

@@ -66,13 +66,21 @@ class Clickable extends ConcreteCell {
         event.stopPropagation();
 
         if (this.props.url) {
-            if (this.props.target) {
+            if (event.ctrlKey) {
+                window.open(this.props.url, "_blank");
+            }
+            else if (this.props.target) {
                 window.open(this.props.url, this.props.target);
             } else {
                 window.location.href = this.props.url;
             }
         } else {
-            this.sendMessage({'event': 'click'});
+            if (event.ctrlKey) {
+                this.sendMessage({'event': 'ctrlClick'});
+            }
+            else {
+                this.sendMessage({'event': 'click'});
+            }
         }
     }