web: Don't use useId for now.

Preact's useId does not work with multiple roots:
preactjs/preact#3781

Once the port to preact is complete,
we can switch back to Preact's useId.

Author: rtrbt

software/web/src/ts/components/input_date.tsx

@@ -18,7 +18,7 @@
  */
 
 import { h, Context, Fragment, ComponentChildren } from "preact";
-import { useContext, useId, useRef } from "preact/hooks";
+import { useContext, useRef, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 import { Button } from "react-bootstrap";
 import { ArrowLeft, ArrowRight } from "react-feather";
@@ -36,7 +36,7 @@ interface InputDateProps extends Omit<JSXInternal.HTMLAttributes<HTMLInputElemen
 
 export function InputDate(props: InputDateProps) {
     const input = useRef<HTMLInputElement>();
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
     const dateToValue = (date: Date) => {
         try {

software/web/src/ts/components/input_file.tsx

@@ -20,7 +20,7 @@
 import * as util from "../../ts/util";
 
 import { h, Context, Fragment } from "preact";
-import { useContext, useId, useState } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 import { Button } from "react-bootstrap";
 import { __ } from "../../ts/translation";
@@ -46,7 +46,7 @@ export function InputFile(props: InputFileProps) {
 
     const percent = (progress * 100).toFixed(0);
 
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
     const upload = async () => {
         if(props.onUploadStart && !await props.onUploadStart(file))

software/web/src/ts/components/input_float.tsx

@@ -20,7 +20,7 @@
 import * as util from "../util";
 
 import { h, Context, Fragment } from "preact";
-import { useContext, useId, useRef, useState } from "preact/hooks";
+import { useContext, useRef, useState } from "preact/hooks";
 import { Button, ButtonGroup } from "react-bootstrap";
 import { Minus, Plus } from "react-feather";
 
@@ -40,7 +40,7 @@ interface InputFloatProps extends InputFloatReadonlyProps {
 }
 
 export function InputFloat(props: InputFloatProps | InputFloatReadonlyProps) {
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
     let pow10 = Math.pow(10, props.digits);
 

software/web/src/ts/components/input_indicator.tsx

@@ -18,10 +18,12 @@
  */
 
 import { h, Context } from "preact";
-import { useContext, useId } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 import { Button } from "react-bootstrap";
 
+import * as util from "../../ts/util";
+
 type variant = "primary" | "secondary" | "success" | "warning" | "danger" | "light" | "link"
 
 interface InputIndicatorProps extends Omit<JSXInternal.HTMLAttributes<HTMLInputElement>,  "class" | "id" | "type" | "onInput"> {
@@ -36,7 +38,7 @@ interface InputIndicatorProps extends Omit<JSXInternal.HTMLAttributes<HTMLInputE
 }
 
 export function InputIndicator(props: InputIndicatorProps) {
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
     let inner = (
         <input class={`form-control input-indicator input-indicator-${props.variant}`}

software/web/src/ts/components/input_ip.tsx

@@ -18,9 +18,11 @@
  */
 
 import { h, Context, Fragment, ComponentChildren } from "preact";
-import { useContext, useId } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 
+import * as util from "../../ts/util";
+
 interface InputIPProps extends Omit<JSXInternal.HTMLAttributes<HTMLInputElement>,  "class" | "id" | "type" | "minLength" | "maxLength" | "size" | "pattern" | "onInput"> {
     idContext?: Context<string>
     onValue: (value: string) => void
@@ -29,7 +31,7 @@ interface InputIPProps extends Omit<JSXInternal.HTMLAttributes<HTMLInputElement>
 }
 
 export function InputIP(props: InputIPProps) {
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
     return (<>
         <input class={"form-control" + (props.moreClasses? " " + props.moreClasses.join(" ") : "")}
                id={id}

software/web/src/ts/components/input_month.tsx

@@ -18,7 +18,7 @@
  */
 
 import { h, Context, ComponentChildren, Fragment } from "preact";
-import { useContext, useId, useRef } from "preact/hooks";
+import { useContext, useRef, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 import { Button } from "react-bootstrap";
 import { ArrowLeft, ArrowRight } from "react-feather";
@@ -38,7 +38,7 @@ interface InputMonthProps extends Omit<JSXInternal.HTMLAttributes<HTMLInputEleme
 //        but the arrow buttons work as expected, so this is still usable
 export function InputMonth(props: InputMonthProps) {
     const input = useRef<HTMLInputElement>();
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
     const dateToValue = (date: Date) => {
         try {

software/web/src/ts/components/input_number.tsx

@@ -18,7 +18,7 @@
  */
 
 import { h, Context, Fragment } from "preact";
-import { useContext, useId, useRef } from "preact/hooks";
+import { useContext, useRef, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 import { Button } from "react-bootstrap";
 import { Minus, Plus } from "react-feather";
@@ -33,7 +33,7 @@ interface InputNumberProps extends Omit<JSXInternal.HTMLAttributes<HTMLInputElem
 }
 
 export function InputNumber(props: InputNumberProps) {
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
     const input = useRef<HTMLInputElement>();
 

software/web/src/ts/components/input_password.tsx

@@ -18,12 +18,14 @@
  */
 
 import { h, Component, Context, Fragment } from "preact";
-import { useContext, useId } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 import { Button } from "react-bootstrap";
 import { Eye, EyeOff, Trash2 } from "react-feather";
 import { __ } from "../translation";
 
+import * as util from "../../ts/util";
+
 interface InputPasswordProps extends Omit<JSXInternal.HTMLAttributes<HTMLInputElement>,  "class" | "id" | "type" | "onInput" | "value" | "disabled"> {
     idContext?: Context<string>
     value: string | null
@@ -60,7 +62,7 @@ export class InputPassword extends Component<InputPasswordProps, InputPasswordSt
     }
 
     render(props: InputPasswordProps, state: Readonly<InputPasswordState>) {
-        const id = !props.idContext ? useId() : useContext(props.idContext);
+        const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
         let invalidFeedback = undefined;
         if ("invalidFeedback" in props)

software/web/src/ts/components/input_select.tsx

@@ -18,9 +18,11 @@
  */
 
 import { h, Context } from "preact";
-import { useContext, useId } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 
+import * as util from "../../ts/util";
+
 export interface InputSelectProps extends Omit<JSXInternal.HTMLAttributes<HTMLSelectElement>, "id" | "type" | "onInput"> {
     idContext?: Context<string>
     items: [string, string][];
@@ -33,7 +35,7 @@ export interface InputSelectProps extends Omit<JSXInternal.HTMLAttributes<HTMLSe
 export function InputSelect(props: InputSelectProps) {
     let {idContext, items, value, onValue, placeholder, classList, style, ...p} = props;
 
-    const id = !idContext ? useId() : useContext(idContext);
+    const id = !idContext ? util.useId() : useContext(idContext);
 
     if (placeholder) {
         let found = false;

software/web/src/ts/components/input_text.tsx

@@ -18,7 +18,7 @@
  */
 
 import { h, Context, Fragment, ComponentChildren } from "preact";
-import { useContext, useId } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 import { __ } from "../translation";
 
@@ -42,7 +42,7 @@ interface InputTextWithValidationProps extends Omit<JSXInternal.HTMLAttributes<H
 }
 
 export function InputText<T extends (InputTextProps | InputTextWithValidationProps)>(props: util.NoExtraProperties<InputTextProps, T> | InputTextWithValidationProps) {
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
     let invalidFeedback = undefined;
     if ("invalidFeedback" in props && props.invalidFeedback)

software/web/src/ts/components/output_datetime.tsx

@@ -18,9 +18,11 @@
  */
 
 import { h, Context } from "preact";
-import { useContext, useId } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 import { JSXInternal } from "preact/src/jsx";
 
+import * as util from "../../ts/util";
+
 interface OutputDatetimeProps extends Omit<JSXInternal.HTMLAttributes<HTMLInputElement>, "value" | "class" | "id" | "type" | "onInput" | "disabled"> {
     idContext?: Context<string>
     date: Date
@@ -43,7 +45,7 @@ function toIsoString(date: Date) {
 }
 
 export function OutputDatetime(props: OutputDatetimeProps) {
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
     let inner = <input class={"form-control " + props.className}
                 id={id}

software/web/src/ts/components/output_float.tsx

@@ -20,7 +20,7 @@
 import * as util from "../util";
 
 import { h, Context } from "preact";
-import { useContext, useId } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 
 interface OutputFloatProps {
     idContext?: Context<string>
@@ -34,7 +34,7 @@ interface OutputFloatProps {
 }
 
 export function OutputFloat(props: OutputFloatProps) {
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
     let pow10 = Math.pow(10, props.scale);
 
     let val = util.toLocaleFixed(props.value / pow10, props.digits);

software/web/src/ts/components/switch.tsx

@@ -18,7 +18,9 @@
  */
 
 import { h, JSX, Context, ComponentChildren } from "preact";
-import { useContext, useId } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
+
+import * as util from "../../ts/util";
 
 export interface SwitchProps {
     idContext?: Context<string>
@@ -30,7 +32,7 @@ export interface SwitchProps {
 }
 
 export function Switch(props: SwitchProps) {
-    const id = !props.idContext ? useId() : useContext(props.idContext);
+    const id = !props.idContext ? util.useId() : useContext(props.idContext);
 
     let inner = <div class={"borderless-form-control custom-control custom-switch "}>
             <input type="checkbox" class="custom-control-input" id={id} checked={props.checked} onClick={props.onClick} disabled={props.disabled}/>

software/web/src/ts/util.ts

@@ -26,6 +26,7 @@ import { __ } from "./translation";
 import { AsyncModal } from "./components/async_modal";
 import { api_cache } from "./api_defs";
 import { batch, signal, Signal } from "@preact/signals-core";
+import { useState } from "preact/hooks";
 
 export function reboot() {
     API.call("reboot", null, "").then(() => postReboot(__("util.reboot_title"), __("util.reboot_text")));
@@ -624,3 +625,17 @@ export function compareArrays(a: Array<any>, b: Array<any>): boolean
 {
     return a.length === b.length && a.every((element, index) => element === b[index]);
 }
+
+// https://stackoverflow.com/a/1535650
+export let nextId = (function() {
+    var id = 0;
+    return function() {return "ID-" + (++id).toString();};
+})();
+
+// Preact's useId does not work with multiple roots:
+// https://github.com/preactjs/preact/issues/3781
+// Once the port to preact is complete,
+// we can switch back to Preact's useId.
+export function useId() {
+    return useState(nextId())[0];
+}