Search code examples
flutterdartfirefoxkeyboard-shortcuts

How can I prevent the slash ("/") key from opening Firefox's "Quick Find" feature in my Flutter app?


Background

In my Flutter application, I am using the LogicalKeyboardKey.slash key as a shortcut for a division operation.

When deployed to the web, in Chrome this is not an issue and works fine. The issue is specifically with Firefox.

The Issue

When the user presses / in Firefox, while the division operation still triggers, Firefox also opens its "Quick Find" accessibility feature. After this happens, the cursor and focus shift to the "Quick Find" text input box.

This creates the UX issue where subsequent key presses add text to the "Quick Find" input box instead of what held the focus in my Flutter app before "Quick Find" opened.

Question

How can I programmatically, in Flutter/Dart, keep the LogicalKeyboardKey.slash key from opening Firefox's "Quick Find" feature?

Notes

It is a business requirement that this key trigger this operation, so I cannot use another key as an alternative.

The app is also public facing, so it would be unrealistic to ask all users to disable "Quick Find" manually if they are using Firefox, unless it were a label in the app itself. (This should be avoided, unless totally necessary.)


Solution

  • The Issue

    I have been thwarted for some days by Firefox opening the search box if the / key on the keyboard's number pad was pressed. Additionally, if this key was pressed while editing a content-editable element in HTML, once the search box opened, further editing ran amok and required page reload to fix.

    How to Fix

    Capture keydown events before they reach their target and prevent FireFox's default action from happening later:

    function keydown(event) {
        if(  event.code == "NumpadDivide"
          || event.code == "Slash"
          || event.code == "Quote") {
            event.preventDefault();
        }
    }
    window.addEventListener("keydown", keydown, {capture: true} );
    

    This should work under Flutter/Dart as well given Firefox has added a default response to the numeric pad divide key which other browser don't implement, so preventing this particular default action should have no effect in other browsers.

    Thanks for the question.

    More Information (Dec 2, 2023)

    In addition to supporting the usual shortcut for bringing up search box by typing CTRL+F, FireFox opens and focuses the search box if / (slash) or ' (single quote) are typed on the main keyboard, or / on the numeric keyboard, provided the cursor is not located in an input, textarea or content-editable element. If the cursor is in an editable element, single quote and slash keys operate as expected.

    Edge opens the search box using CTRL+F but not ' or / in the manner of FireFox.

    <opinion> In my own project I am going to prevent the default actions of all slash or single quote keys. While their actions seem to be designed to assist mobile layouts that don't have function keys, users who are not gurus in Firefox keyboard shortcuts won't notice they are missing and won't get seriously confused. </opinion>