feat: channel key inputs to input when focused

Author: SkySails

examples/gauge/Components/Input.tsx

@@ -0,0 +1,51 @@
+import { ComponentProps, DisplayComponent, FSComponent, Subscribable, UUID, VNode } from "@microsoft/msfs-sdk"
+
+interface InputProps extends ComponentProps {
+  type: HTMLInputElement["type"]
+  name?: string
+  value?: string
+  class?: string | Subscribable<string>
+}
+
+export class Input extends DisplayComponent<InputProps> {
+  private readonly inputId = UUID.GenerateUuid()
+  private readonly inputRef = FSComponent.createRef<HTMLInputElement>()
+
+  get value() {
+    return this.inputRef.instance.value
+  }
+
+  onAfterRender(node: VNode): void {
+    super.onAfterRender(node)
+
+    this.inputRef.instance.onfocus = this.onInputFocus
+    this.inputRef.instance.onblur = this.onInputBlur
+  }
+
+  private getInputProps() {
+    return { name: this.props.name, value: this.props.value, class: this.props.class }
+  }
+
+  /**
+   * Method to handle when input focus is set
+   * @param e The focus event.
+   */
+  private onInputFocus = (e: FocusEvent): void => {
+    e.preventDefault()
+
+    Coherent.trigger("FOCUS_INPUT_FIELD", this.inputId, "", "", this.inputRef.instance.value, false)
+    Coherent.on("mousePressOutsideView", () => this.inputRef.instance.blur())
+  }
+
+  /**
+   * Method to handle on input blur
+   */
+  private onInputBlur = (): void => {
+    Coherent.trigger("UNFOCUS_INPUT_FIELD", "")
+    Coherent.off("mousePressOutsideView")
+  }
+
+  render() {
+    return <input ref={this.inputRef} {...this.getInputProps()} />
+  }
+}

examples/gauge/Components/InterfaceSample.tsx

@@ -9,6 +9,7 @@ import {
   NavigraphNavigationDataInterface,
 } from "@navigraph/msfs-navigation-data-interface"
 import { Dropdown } from "./Dropdown"
+import { Input } from "./Input"
 
 interface InterfaceSampleProps extends ComponentProps {
   bus: EventBus
@@ -22,7 +23,7 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
   private readonly dropdownRef = FSComponent.createRef<Dropdown>()
   private readonly downloadButtonRef = FSComponent.createRef<HTMLButtonElement>()
   private readonly executeButtonRef = FSComponent.createRef<HTMLButtonElement>()
-  private readonly inputRef = FSComponent.createRef<HTMLInputElement>()
+  private readonly inputRef = FSComponent.createRef<Input>()
 
   private cancelSource = CancelToken.source()
 
@@ -68,7 +69,7 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
             <div ref={this.downloadButtonRef} class="button">
               Download
             </div>
-            <input ref={this.inputRef} type="text" id="sql" name="sql" value="ESSA" class="text-field" />
+            <Input ref={this.inputRef} type="text" value="ESSA" class="text-field" />
             <div ref={this.executeButtonRef} class="button">
               Fetch Airport
             </div>

examples/gauge/global.d.ts

@@ -0,0 +1,15 @@
+interface CoherentEngine {
+  /**
+   * Asynchronously call a C++ handler and retrieve the result
+   * @param name name of the C++ handler to be called
+   * @param args any extra parameters to be passed to the C++ handler
+   * @return promise for the result of the C++ function
+   */
+  call(name: "PLAY_INSTRUMENT_SOUND", soundName: string): Promise<void>
+  call(name: string, ...args: unknown[]): Promise<unknown>
+
+  on(name: "SetInputTextFromOS" | "mousePressOutsideView", cb: () => void): void
+  off(name: "SetInputTextFromOS" | "mousePressOutsideView", cb?: () => void): void
+
+  trigger(name: "FOCUS_INPUT_FIELD" | "UNFOCUS_INPUT_FIELD", ...args: unknown[])
+}