Search code examples
firefoxfirefox-addonfirefox-addon-sdkfirefox-addon-webextensions

Cannot type slash or single quote in firefox add-on input field

I'm learning to develop a Firefox add-on. I've made a simple dev-tools tab with an input box. I'm finding that I can type every character into the input box with the exception of "/" or "'". A forward slash or single quote will not populate. Nothing appears in the input box when I type these characters.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
  body{
    margin:0;
  }
  .warpath-search{
    width:100%;
    background-color:#fcfcfc;
    border:1px solid #f0f1f2;
    padding:.3em;
  }
  .warpath-search label{
    width:100px;
    display:inline-block;
  }
  .warpath-search input{
    width:400px;
  }
</style>
  </head>
  <body>
    <div class="warpath-search">
      <label>Xpath:</label><input type="text" name="warpath-xpath" id="warpath-xpath" />
    </div>    
    <script src="devtools-panel.js"></script>
  </body>
</html>

devtools-panel.js:

input = document.getElementById("warpath-xpath");
input.addEventListener("keyup", () => {
    console.log(input.value);
});

Gif: enter image description here

If I load the plugin's HTML file directly in the browser I can enter the characters but when it is loaded as a plugin it's blocked. Using Firefox: 70.0.1 (64-bit)

Solution

  • The problem seems to have something to do with a Firefox type-ahead feature. The following steps resolved the issue for me:

    • Open about:config in the browser
    • Click "I accept the risk"
    • Search for "accessibility.typeaheadfind.manual"
    • Change the value of this key from "true" to "false"