diff --git a/toolkit/components/satchel/nsFormFillController.cpp b/toolkit/components/satchel/nsFormFillController.cpp
index 30e099907cd1..29032ec08d3b 100644
--- a/toolkit/components/satchel/nsFormFillController.cpp
+++ b/toolkit/components/satchel/nsFormFillController.cpp
@@ -789,7 +789,7 @@ nsFormFillController::HandleEvent(Event* aEvent) {
     case eKeyPress:
       return KeyPress(aEvent);
     case eEditorInput: {
-      nsCOMPtr<nsINode> input = do_QueryInterface(aEvent->GetTarget());
+      nsCOMPtr<nsINode> input = do_QueryInterface(aEvent->GetComposedTarget());
       if (!IsTextControl(input)) {
         return NS_OK;
       }
@@ -927,7 +927,7 @@ void nsFormFillController::MaybeStartControllingInput(
 }
 
 nsresult nsFormFillController::Focus(Event* aEvent) {
-  nsCOMPtr<nsIContent> input = do_QueryInterface(aEvent->GetTarget());
+  nsCOMPtr<nsIContent> input = do_QueryInterface(aEvent->GetComposedTarget());
   MaybeStartControllingInput(HTMLInputElement::FromNodeOrNull(input));
 
   // Bail if we didn't start controlling the input.
@@ -1094,7 +1094,7 @@ nsresult nsFormFillController::MouseDown(Event* aEvent) {
     return NS_ERROR_FAILURE;
   }
 
-  nsCOMPtr<nsINode> targetNode = do_QueryInterface(aEvent->GetTarget());
+  nsCOMPtr<nsINode> targetNode = do_QueryInterface(aEvent->GetComposedTarget());
   if (!HTMLInputElement::FromNodeOrNull(targetNode)) {
     return NS_OK;
   }
diff --git a/toolkit/components/satchel/test/mochitest.ini b/toolkit/components/satchel/test/mochitest.ini
index 4d296cb2e401..f51aefdb6fa5 100644
--- a/toolkit/components/satchel/test/mochitest.ini
+++ b/toolkit/components/satchel/test/mochitest.ini
@@ -11,6 +11,7 @@ skip-if = os == 'linux' # bug 1022386
 [test_bug_787624.html]
 skip-if = os == 'linux' # bug 1022386
 [test_datalist_with_caching.html]
+[test_datalist_shadow_dom.html]
 [test_form_autocomplete.html]
 skip-if = (verify && debug && (os == 'win')) || os == 'linux' # linux - bug 1022386
 [test_form_autocomplete_with_list.html]
diff --git a/toolkit/components/satchel/test/test_datalist_shadow_dom.html b/toolkit/components/satchel/test/test_datalist_shadow_dom.html
new file mode 100644
index 000000000000..52c681ce1f27
--- /dev/null
+++ b/toolkit/components/satchel/test/test_datalist_shadow_dom.html
@@ -0,0 +1,124 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for datalist in Shadow DOM</title>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
+  <script type="text/javascript" src="/tests/SimpleTest/AddTask.js"></script>
+  <script type="text/javascript" src="satchel_common.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<p id="display"></p>
+<div id="content">
+  <div id="host"></div>
+</div>
+
+<pre id="test">
+<script class="testbody" type="text/javascript">
+const host = document.getElementById("host");
+host.attachShadow({ mode: "open" }).innerHTML = `
+  <form id="form1" onsubmit="return false;">
+    <input list="suggest" type="text" name="field1">
+    <button type="submit">Submit</button>
+  </form>
+  <datalist id="suggest">
+    <option value="First"></option>
+    <option value="Second"></option>
+    <option value="Secomundo"></option>
+  </datalist><Paste>
+`;
+
+let input = host.shadowRoot.querySelector("input");
+
+function setForm(value) {
+  input.value = value;
+  input.focus();
+}
+
+// Restore the form to the default state.
+function restoreForm() {
+  setForm("");
+}
+
+// Check for expected form data.
+function checkForm(expectedValue) {
+  let formID = input.parentNode.id;
+  is(input.value, expectedValue, "Checking " + formID + " input");
+}
+
+SimpleTest.waitForExplicitFinish();
+
+var expectingPopup = null;
+
+function expectPopup() {
+  info("expecting a popup");
+  return new Promise(resolve => {
+    expectingPopup = resolve;
+  });
+}
+
+var testNum = 0;
+
+function popupShownListener() {
+  info("popup shown for test " + testNum);
+  if (expectingPopup) {
+    expectingPopup();
+    expectingPopup = null;
+  } else {
+    ok(false, "Autocomplete popup not expected during test " + testNum);
+  }
+}
+
+function waitForMenuChange(expectedCount) {
+  return new Promise(resolve => {
+    notifyMenuChanged(expectedCount, null, resolve);
+  });
+}
+
+registerPopupShownListener(popupShownListener);
+
+function checkMenuEntries(expectedValues) {
+  let actualValues = getMenuEntries();
+  is(actualValues.length, expectedValues.length, testNum + " Checking length of expected menu");
+  for (let i = 0; i < expectedValues.length; i++) {
+    is(actualValues[i], expectedValues[i], testNum + " Checking menu entry #" + i);
+  }
+}
+
+async function runTests() {
+  testNum++;
+  restoreForm();
+  synthesizeKey("KEY_ArrowDown");
+  await expectPopup();
+
+  checkMenuEntries(["First", "Second", "Secomundo"]);
+  synthesizeKey("KEY_ArrowDown");
+  synthesizeKey("KEY_Enter");
+  checkForm("First");
+
+  testNum++;
+  restoreForm();
+  sendString("Sec");
+  synthesizeKey("KEY_ArrowDown");
+  await expectPopup();
+
+  testNum++;
+  checkMenuEntries(["Second", "Secomundo"]);
+  sendString("o");
+  await waitForMenuChange(2);
+
+  testNum++;
+  checkMenuEntries(["Second", "Secomundo"]);
+  synthesizeKey("KEY_ArrowDown");
+  synthesizeKey("KEY_Enter");
+  checkForm("Second");
+  SimpleTest.finish();
+}
+
+window.onload = runTests();
+
+</script>
+</pre>
+</body>
+</html>
