Add keyboard type support for input fields

Author: olimsaidov

COVERAGE.md

@@ -1,3 +1,5 @@
+import type { HTMLAttributes } from "react";
+
 export function TextArea({
   id,
   value,
@@ -7,6 +9,7 @@ export function TextArea({
   rows = 4,
   ariaLabelledBy,
   ariaDescribedBy,
+  inputMode,
 }: {
   id?: string | undefined;
   value: string;
@@ -16,6 +19,7 @@ export function TextArea({
   rows?: number | undefined;
   ariaLabelledBy?: string | undefined;
   ariaDescribedBy?: string | undefined;
+  inputMode?: HTMLAttributes<Element>["inputMode"] | undefined;
 }) {
   return (
     <textarea
@@ -28,6 +32,7 @@ export function TextArea({
       rows={rows}
       aria-labelledby={ariaLabelledBy}
       aria-describedby={ariaDescribedBy}
+      inputMode={inputMode}
     />
   );
 }

lib/components/controls/text-area.tsx

@@ -1,3 +1,5 @@
+import type { HTMLAttributes } from "react";
+
 export function TextInput({
   id,
   type = "text",
@@ -7,6 +9,7 @@ export function TextInput({
   placeholder,
   ariaLabelledBy,
   ariaDescribedBy,
+  inputMode,
 }: {
   id?: string | undefined;
   type?: string | undefined;
@@ -16,6 +19,7 @@ export function TextInput({
   placeholder?: string | undefined;
   ariaLabelledBy?: string | undefined;
   ariaDescribedBy?: string | undefined;
+  inputMode?: HTMLAttributes<Element>["inputMode"] | undefined;
 }) {
   return (
     <input
@@ -28,6 +32,7 @@ export function TextInput({
       placeholder={placeholder}
       aria-labelledby={ariaLabelledBy}
       aria-describedby={ariaDescribedBy}
+      inputMode={inputMode}
     />
   );
 }

lib/components/controls/text-input.tsx

@@ -0,0 +1,119 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import type { Questionnaire } from "fhir/r5";
+
+import { FormStore } from "../../../stores/form-store.ts";
+import { isQuestionNode } from "../../../stores/question-store.ts";
+import { QuestionNode } from "../../nodes/question-node.tsx";
+import { EXT } from "../../../utils.ts";
+
+function getQuestion(form: FormStore, linkId: string) {
+  const node = form.scope.lookupNode(linkId);
+  expect(node && isQuestionNode(node)).toBe(true);
+  if (!node || !isQuestionNode(node)) {
+    throw new Error("Expected question node");
+  }
+  return node;
+}
+
+describe("keyboard extension", () => {
+  it("applies tel input mode for phone keyboard type on string questions", () => {
+    const questionnaire: Questionnaire = {
+      resourceType: "Questionnaire",
+      status: "active",
+      item: [
+        {
+          linkId: "contact-phone",
+          text: "Contact phone",
+          type: "string",
+          extension: [
+            {
+              url: EXT.SDC_KEYBOARD,
+              valueCoding: {
+                system: "http://hl7.org/fhir/uv/sdc/ValueSet/keyboardType",
+                code: "phone",
+              },
+            },
+          ],
+        },
+      ],
+    };
+
+    const form = new FormStore(questionnaire);
+    const question = getQuestion(form, "contact-phone");
+
+    expect(question.keyboardType).toBe("tel");
+
+    render(<QuestionNode item={question} />);
+
+    const input = screen.getByLabelText("Contact phone") as HTMLInputElement;
+    expect(input.getAttribute("inputmode")).toBe("tel");
+  });
+
+  it("applies text input mode for chat keyboard type on text questions", () => {
+    const questionnaire: Questionnaire = {
+      resourceType: "Questionnaire",
+      status: "active",
+      item: [
+        {
+          linkId: "chat-text",
+          text: "Chat message",
+          type: "text",
+          extension: [
+            {
+              url: EXT.SDC_KEYBOARD,
+              valueCoding: {
+                system: "http://hl7.org/fhir/uv/sdc/ValueSet/keyboardType",
+                code: "chat",
+              },
+            },
+          ],
+        },
+      ],
+    };
+
+    const form = new FormStore(questionnaire);
+    const question = getQuestion(form, "chat-text");
+
+    expect(question.keyboardType).toBe("text");
+
+    render(<QuestionNode item={question} />);
+
+    const textarea = screen.getByLabelText(
+      "Chat message",
+    ) as HTMLTextAreaElement;
+    expect(textarea.getAttribute("inputmode")).toBe("text");
+  });
+
+  it("ignores unsupported keyboard codes", () => {
+    const questionnaire: Questionnaire = {
+      resourceType: "Questionnaire",
+      status: "active",
+      item: [
+        {
+          linkId: "other",
+          text: "Other",
+          type: "string",
+          extension: [
+            {
+              url: EXT.SDC_KEYBOARD,
+              valueCoding: {
+                code: "unsupported",
+              },
+            },
+          ],
+        },
+      ],
+    };
+
+    const form = new FormStore(questionnaire);
+    const question = getQuestion(form, "other");
+
+    expect(question.keyboardType).toBeUndefined();
+
+    render(<QuestionNode item={question} />);
+
+    const input = screen.getByLabelText("Other") as HTMLInputElement;
+    expect(input.hasAttribute("inputmode")).toBe(false);
+  });
+});

lib/components/questions/__tests__/keyboard-type.test.tsx

@@ -23,6 +23,7 @@ export const StringNode = observer(function StringNode({
             value={value ?? ""}
             onChange={setValue}
             disabled={item.readOnly}
+            inputMode={item.keyboardType}
           />
         )}
       />

lib/components/questions/nodes/string-node.tsx

@@ -23,6 +23,7 @@ export const TextNode = observer(function TextNode({
             value={value ?? ""}
             onChange={setValue}
             disabled={item.readOnly}
+            inputMode={item.keyboardType}
           />
         )}
       />

lib/components/questions/nodes/text-node.tsx

@@ -32,8 +32,11 @@ import { QuestionValidator } from "./question-validator.ts";
 import {
   ANSWER_TYPE_TO_DATA_TYPE,
   answerHasContent,
+  EXT,
+  extractExtensionValue,
   getValue,
 } from "../utils.ts";
+import type { HTMLAttributes } from "react";
 
 type AnswerLifecycle =
   | "pristine"
@@ -88,6 +91,29 @@ export class QuestionStore<T extends AnswerType = AnswerType>
     return !!this.template.repeats;
   }
 
+  @computed
+  get keyboardType(): HTMLAttributes<Element>["inputMode"] | undefined {
+    if (this.type !== "string" && this.type !== "text") {
+      return undefined;
+    }
+
+    const coding = extractExtensionValue(
+      this.template,
+      EXT.SDC_KEYBOARD,
+      "Coding",
+    );
+
+    const keyboardMap: Record<string, HTMLAttributes<Element>["inputMode"]> = {
+      phone: "tel",
+      email: "email",
+      number: "numeric",
+      url: "url",
+      chat: "text",
+    };
+
+    return coding?.code ? keyboardMap[coding.code] : undefined;
+  }
+
   @override
   override get maxOccurs(): number {
     return this.repeats ? super.maxOccurs : 1;

lib/stores/question-store.ts

@@ -42,6 +42,7 @@ import {
 } from "fhir/r5";
 import type { EvaluationCoordinator } from "./evaluation-coordinator.ts";
 import { ExpressionRegistry } from "./expression-registry.ts";
+import type { HTMLAttributes } from "react";
 
 export type OperationOutcomeIssueCode =
   | "business-rule" // Expression cycles / logic conflicts
@@ -366,6 +367,7 @@ export interface IQuestionNode<T extends AnswerType = AnswerType>
   extends IActualNode {
   readonly type: T;
   readonly repeats: boolean;
+  readonly keyboardType: HTMLAttributes<Element>["inputMode"] | undefined;
 
   answers: Array<IAnswerInstance<DataTypeToType<AnswerTypeToDataType<T>>>>;
 

lib/stores/types.ts

@@ -62,6 +62,7 @@ export const EXT = {
   SDC_CALCULATED_EXPR:       "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-calculatedExpression",
   SDC_INITIAL_EXPR:          "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
   SDC_VARIABLE:              "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-variable",
+  SDC_KEYBOARD:              "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-keyboard",
   CQF_EXPRESSION:            "http://hl7.org/fhir/StructureDefinition/cqf-expression",
   CQF_CALCULATED_VALUE:      "http://hl7.org/fhir/uv/cql/StructureDefinition/cqf-calculatedValue",
   TARGET_CONSTRAINT:         "http://hl7.org/fhir/StructureDefinition/targetConstraint",