impl: blurForcusedElementOnActivation

src/background/Program.ts

@@ -2173,6 +2173,7 @@ export default class BackgroundProgram {
       oneTimeWindowMessageToken: this.oneTimeWindowMessageToken,
       mac: this.options.mac,
       isPinned: tabState.isPinned,
+      blurFocusedElementOnActivation: this.options.values.blurFocusedElementOnActivation,
     };
 
     const getKeyboardShortcuts = (

src/options/Program.tsx

@@ -615,6 +615,41 @@ export default class OptionsProgram extends Component<Props, State> {
             )}
           />
 
+          <Field
+            key="blurFocusedElementOnActivation"
+            id="blurFocusedElementOnActivation"
+            label="Blur focused element when activating hints"
+            description={
+              <p>
+                When enabled, any currently focused element (like input fields or
+                text areas) will be blurred when hints are activated. This can
+                prevent the focused element from capturing keyboard input that
+                should go to the link hints system.
+              </p>
+            }
+            changed={options.blurFocusedElementOnActivation !== defaults.blurFocusedElementOnActivation}
+            render={({ id }) => (
+              <span
+                className="ShrinkwrapChildren"
+                style={{ flex: "1 1 100%" }}
+              >
+                <label className="Spaced Spaced--center">
+                  <input
+                    type="checkbox"
+                    id={id}
+                    checked={options.blurFocusedElementOnActivation}
+                    onChange={(event) => {
+                      this.saveOptions({
+                        blurFocusedElementOnActivation: event.currentTarget.checked,
+                      });
+                    }}
+                  />
+                  <span>Enabled</span>
+                </label>
+              </span>
+            )}
+          />
+
           <Field
             key="useKeyTranslations"
             id="useKeyTranslations"

src/shared/messages.ts

@@ -154,6 +154,7 @@ export type ToWorker =
       oneTimeWindowMessageToken: string;
       mac: boolean;
       isPinned: boolean;
+      blurFocusedElementOnActivation: boolean;
     }
   | {
       type: "UpdateElements";

src/shared/options.ts

@@ -51,6 +51,7 @@ export const Options = fieldsAuto({
   keyTranslations: record(KeyPair),
   normalKeyboardShortcuts: array(KeyboardMappingWithModifiers),
   hintsKeyboardShortcuts: array(KeyboardMapping),
+  blurFocusedElementOnActivation: boolean,
 });
 
 const MIN_CHARS = 2;
@@ -126,6 +127,7 @@ export function getDefaults({ mac }: { mac: boolean }): Options {
     logLevel: DEFAULT_LOG_LEVEL,
     useKeyTranslations: false,
     keyTranslations: EN_US_QWERTY_TRANSLATIONS,
+    blurFocusedElementOnActivation: false,
     normalKeyboardShortcuts: [
       {
         shortcut: mainShortcut("j"),

src/worker/Program.ts

@@ -89,6 +89,8 @@ export default class WorkerProgram {
 
   mac = false;
 
+  blurFocusedElementOnActivation = false;
+
   suppressNextKeyup: { key: string; code: string } | undefined = undefined;
 
   resets = new Resets();
@@ -203,13 +205,26 @@ export default class WorkerProgram {
         this.keyTranslations = message.keyTranslations;
         this.oneTimeWindowMessageToken = message.oneTimeWindowMessageToken;
         this.mac = message.mac;
+        this.blurFocusedElementOnActivation = message.blurFocusedElementOnActivation;
 
         if (message.clearElements) {
           this.clearCurrent();
         }
         break;
 
       case "StartFindElements": {
+        // Blur focused element if option is enabled
+        if (this.blurFocusedElementOnActivation && document.activeElement) {
+          const activeElement = document.activeElement as HTMLElement;
+          if (activeElement.blur && (
+            activeElement.tagName === "INPUT" ||
+            activeElement.tagName === "TEXTAREA" ||
+            activeElement.contentEditable === "true"
+          )) {
+            activeElement.blur();
+          }
+        }
+
         const run = (types: ElementTypes): void => {
           const { oneTimeWindowMessageToken } = this;
           if (oneTimeWindowMessageToken === undefined) {