@oneuptime/common 13.0.0 → 13.0.3

package/UI/Components/Forms/ModelForm.tsx

@@ -20,11 +20,17 @@ import {
 import type { DropdownOption } from "../Dropdown/Dropdown";
 import Loader, { LoaderType } from "../Loader/Loader";
 import Pill, { PillSize } from "../Pill/Pill";
+import {
+  addRuleCriteriaToSelect,
+  applyRuleCriteriaLegacySafetyShadow,
+  replaceLegacyRuleCriteriaFields,
+} from "../RuleCriteria/RuleCriteriaModelForm";
 import { FormErrors, FormProps, FormSummaryConfig } from "./BasicForm";
 import BasicModelForm from "./BasicModelForm";
 import Field from "./Types/Field";
 import Fields from "./Types/Fields";
 import { FormStep } from "./Types/FormStep";
+import FormFieldSchemaType from "./Types/FormFieldSchemaType";
 import FormValues from "./Types/FormValues";
 import FormAnalyticsName from "./Utils/FormAnalyticsName";
 import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
@@ -51,7 +57,7 @@ import Permission, {
   UserPermission,
 } from "../../../Types/Permission";
 import Typeof from "../../../Types/Typeof";
-import React, { MutableRefObject, ReactElement, useState } from "react";
+import React, { MutableRefObject, ReactElement, useRef, useState } from "react";
 import useAsyncEffect from "use-async-effect";
 import Select from "../../../Types/BaseDatabase/Select";
 
@@ -132,6 +138,37 @@ const ModelForm: <TBaseModel extends BaseModel>(
   const [itemToEdit, setItemToEdit] = useState<TBaseModel | null>(null);
   const model: TBaseModel = new props.modelType();
 
+  /*
+   * Almost every caller writes its `fields` as an inline array literal in JSX,
+   * so the array is a brand new identity on every render of the page holding
+   * the form - which makes the effect below re-run whenever ANY unrelated
+   * state on that page changes, including while the user is typing into this
+   * form. Two guards keep that from being destructive:
+   *
+   *  - `dropdownOptionsCache` remembers the options already fetched for a
+   *    given dropdown, so a re-run does not fire the same list request again.
+   *    Without it the invite-user form issued a Team list request per
+   *    keystroke.
+   *  - `fieldsRunGeneration` discards a slower earlier run, so an in-flight
+   *    request that resolves after a newer one cannot put stale fields back
+   *    or clear a loading flag the newer run still owns.
+   */
+  type DropdownOptionsCacheEntry = {
+    dropdownOptions: Array<DropdownOption>;
+    selectByAccessControlProps: Field<TBaseModel>["selectByAccessControlProps"];
+  };
+
+  /*
+   * Keyed on the model CONSTRUCTOR rather than on its name, so two models can
+   * never share an entry however they are named - a model with neither a
+   * tableName nor a singularName would otherwise key as the empty string.
+   */
+  const dropdownOptionsCache: MutableRefObject<
+    Map<unknown, Dictionary<DropdownOptionsCacheEntry>>
+  > = useRef<Map<unknown, Dictionary<DropdownOptionsCacheEntry>>>(new Map());
+
+  const fieldsRunGeneration: MutableRefObject<number> = useRef<number>(0);
+
   const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
 
   type GetSelectFieldsFunction = () => Select<TBaseModel>;
@@ -151,7 +188,11 @@ const ModelForm: <TBaseModel extends BaseModel>(
       }
     }
 
-    return select;
+    return addRuleCriteriaToSelect({
+      model: model,
+      fields: props.fields,
+      select: select as Record<string, unknown>,
+    }) as Select<TBaseModel>;
   };
 
   const getRelationSelect: () => Select<TBaseModel> =
@@ -242,6 +283,9 @@ const ModelForm: <TBaseModel extends BaseModel>(
   };
 
   const setFormFields: PromiseVoidFunction = async (): Promise<void> => {
+    fieldsRunGeneration.current = fieldsRunGeneration.current + 1;
+    const generation: number = fieldsRunGeneration.current;
+
     let fieldsToSet: Fields<TBaseModel> = [];
 
     for (const field of props.fields) {
@@ -314,7 +358,14 @@ const ModelForm: <TBaseModel extends BaseModel>(
       }
     }
 
-    fieldsToSet = await fetchDropdownOptions(fieldsToSet);
+    fieldsToSet = await fetchDropdownOptions(fieldsToSet, generation);
+
+    if (generation !== fieldsRunGeneration.current) {
+      // A newer run started while this one was fetching. It owns the state now.
+      return;
+    }
+
+    fieldsToSet = replaceLegacyRuleCriteriaFields(model, fieldsToSet);
 
     // if there are no fields to set, then show permission error. This is useful when there are no fields to show.
     if (fieldsToSet.length === 0 && props.fields.length > 0) {
@@ -441,15 +492,103 @@ const ModelForm: <TBaseModel extends BaseModel>(
 
   type FetchDropdownOptionsFunction = (
     fields: Fields<TBaseModel>,
+    generation: number,
   ) => Promise<Fields<TBaseModel>>;
 
+  /*
+   * What a dropdown's options depend on, and nothing else: the model, and the
+   * two columns read off it. The request below takes no query and no closure
+   * state, so two fields with the same three always get the same list back -
+   * which is what makes caching them safe.
+   */
+  type GetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ) => DropdownOptionsCacheEntry | undefined;
+
+  type SetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+    entry: DropdownOptionsCacheEntry,
+  ) => void;
+
+  const getDropdownColumnsKey: (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ) => string = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ): string => {
+    return `${dropdownModal.labelField}|${dropdownModal.valueField}`;
+  };
+
+  const getCachedDropdownOptions: GetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ): DropdownOptionsCacheEntry | undefined => {
+    return dropdownOptionsCache.current.get(dropdownModal.type)?.[
+      getDropdownColumnsKey(dropdownModal)
+    ];
+  };
+
+  const setCachedDropdownOptions: SetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+    entry: DropdownOptionsCacheEntry,
+  ): void => {
+    const byColumns: Dictionary<DropdownOptionsCacheEntry> =
+      dropdownOptionsCache.current.get(dropdownModal.type) || {};
+
+    byColumns[getDropdownColumnsKey(dropdownModal)] = entry;
+
+    dropdownOptionsCache.current.set(dropdownModal.type, byColumns);
+  };
+
   const fetchDropdownOptions: FetchDropdownOptionsFunction = async (
     fields: Fields<TBaseModel>,
+    generation: number,
   ): Promise<Fields<TBaseModel>> => {
+    /*
+     * Serve everything already fetched from the cache first, then work out
+     * whether anything is actually left to request. Flipping the loading flag
+     * for a run that has nothing to fetch used to blank the whole form (see
+     * the comment on the render guard below), so only flip it when a real
+     * request is about to go out.
+     */
+    const fieldsToFetch: Fields<TBaseModel> = [];
+
+    for (const field of fields) {
+      if (!field.dropdownModal || !field.dropdownModal.type) {
+        continue;
+      }
+
+      const cached: DropdownOptionsCacheEntry | undefined =
+        getCachedDropdownOptions(field.dropdownModal);
+
+      if (cached) {
+        field.dropdownOptions = cached.dropdownOptions;
+
+        if (cached.selectByAccessControlProps) {
+          field.selectByAccessControlProps = cached.selectByAccessControlProps;
+        }
+
+        continue;
+      }
+
+      fieldsToFetch.push(field);
+    }
+
+    if (fieldsToFetch.length === 0) {
+      /*
+       * Nothing to wait for. Clearing rather than just returning keeps the flag
+       * from being left on by an older run that lost the race and therefore
+       * declined to clear it - React bails out when it is already false.
+       */
+      if (generation === fieldsRunGeneration.current) {
+        setIsFetchingDropdownOptions(false);
+      }
+
+      return fields;
+    }
+
     setIsFetchingDropdownOptions(true);
 
     try {
-      for (const field of fields) {
+      for (const field of fieldsToFetch) {
         if (field.dropdownModal && field.dropdownModal.type) {
           const tempModel: BaseModel = new field.dropdownModal.type();
           const select: any = {
@@ -642,13 +781,21 @@ const ModelForm: <TBaseModel extends BaseModel>(
           } else {
             field.dropdownOptions = [];
           }
+
+          setCachedDropdownOptions(field.dropdownModal, {
+            dropdownOptions: (field.dropdownOptions ||
+              []) as Array<DropdownOption>,
+            selectByAccessControlProps: field.selectByAccessControlProps,
+          });
         }
       }
     } catch (err) {
       setError(API.getFriendlyMessage(err));
     }
 
-    setIsFetchingDropdownOptions(false);
+    if (generation === fieldsRunGeneration.current) {
+      setIsFetchingDropdownOptions(false);
+    }
 
     return fields;
   };
@@ -742,6 +889,12 @@ const ModelForm: <TBaseModel extends BaseModel>(
         (valuesToSend as any)[key] = values[key];
       }
 
+      applyRuleCriteriaLegacySafetyShadow({
+        model: model,
+        fields: props.fields,
+        values: valuesToSend,
+      });
+
       if (props.formType === FormType.Update && props.modelIdToEdit) {
         (valuesToSend as any)["_id"] = props.modelIdToEdit.toString();
       }
@@ -803,6 +956,67 @@ const ModelForm: <TBaseModel extends BaseModel>(
         }
       }
 
+      /*
+       * A JSON field is EDITED as text - CodeEditor hands the form a string -
+       * but a JSON COLUMN holds real JSON, and nothing converted the one into
+       * the other when saving an existing record.
+       *
+       * TelemetryIngestionKeys converts in onBeforeCreate, and ModelForm only
+       * runs that hook on Create (see below). So editing a browser key's
+       * allowed origins from its detail page sent the string
+       * '["https://app.example.com"]' to a column that holds a list, and
+       * TelemetryIngestionKeyService refused it - "Allowed origins must be a
+       * list of origins". Every JSON column edited through a JSON field had
+       * the same gap on update: the session replay origin, mask and block
+       * selector lists, the LLM provider and data source configs, the
+       * auto-remediation command allowlist.
+       *
+       * Both halves of the condition are load-bearing. Not every JSON editor
+       * is backed by a JSON column: GoogleSecOpsConnection.serviceAccountJson
+       * is VeryLongText, edited as JSON because that is what the customer
+       * pastes, and STORED as the text they pasted - parsing that one would
+       * hand the server an object where it expects the string it decrypts and
+       * parses itself. And not every JSON column is edited as text.
+       *
+       * Only a string is converted, and only when it parses. An untouched
+       * field still holds whatever the fetch loaded (already parsed), and
+       * text that is not JSON cannot reach here because
+       * Validation.validateJSONSyntax blocks the submit.
+       */
+      const jsonEditorFieldNames: Set<string> = new Set<string>(
+        props.fields
+          .filter((field: Field<TBaseModel>) => {
+            return field.fieldType === FormFieldSchemaType.JSON;
+          })
+          .map((field: Field<TBaseModel>) => {
+            return field.overrideFieldKey || Object.keys(field.field || {})[0];
+          })
+          .filter((name: string | undefined): name is string => {
+            return Boolean(name);
+          }),
+      );
+
+      for (const key of jsonEditorFieldNames) {
+        if (typeof valuesToSend[key] !== Typeof.String) {
+          continue;
+        }
+
+        const columnMetadata: TableColumnMetadata =
+          model.getTableColumnMetadata(key);
+
+        if (!columnMetadata || columnMetadata.type !== TableColumnType.JSON) {
+          continue;
+        }
+
+        try {
+          valuesToSend[key] = JSON.parse(
+            valuesToSend[key] as string,
+          ) as JSONObject;
+        } catch {
+          // Not JSON; leave it exactly as the user typed it.
+        }
+      }
+
       let tBaseModel: TBaseModel = BaseModel.fromJSON(
         valuesToSend,
         props.modelType,
@@ -849,7 +1063,26 @@ const ModelForm: <TBaseModel extends BaseModel>(
     }
   };
 
-  if (isFetching || isFetchingDropdownOptions) {
+  /*
+   * Only ever swap the form out for a loader while there is no form to show.
+   * Returning the loader over a form the user is already filling in unmounts
+   * BasicModelForm and everything under it, and a form's values live in that
+   * subtree - in BasicForm's refs and in each Input's own state, since Input
+   * is DOM-uncontrolled. So the remount silently threw the user's input away.
+   *
+   * That is what made inviting a user impossible: the invite form's Email field
+   * calls back into the page on every keystroke to check whether the address
+   * already has an account, the page re-renders with a fresh `fields` array
+   * literal, the effect above re-runs, and the form the user was typing into
+   * was destroyed and rebuilt empty.
+   *
+   * Once fields exist, options refresh in the background instead. The cache in
+   * fetchDropdownOptions means the usual re-run does not even reach the
+   * network, so in practice nothing about the form flickers at all.
+   */
+  const hasFieldsToRender: boolean = fields.length > 0;
+
+  if (isFetching || (isFetchingDropdownOptions && !hasFieldsToRender)) {
     return (
       <div className="row flex justify-center mt-20 mb-20">
         <Loader loaderType={LoaderType.Bar} color={VeryLightGray} size={200} />

package/UI/Components/Forms/Types/Field.ts

@@ -130,7 +130,12 @@ export default interface Field<TEntity> {
     | undefined;
   radioButtonOptions?: Array<RadioButton>;
   footerElement?: ReactElement | undefined;
-  getFooterElement?: (values: FormValues<TEntity>) => ReactElement | undefined;
+  getFooterElement?: (
+    values: FormValues<TEntity>,
+    error?: string,
+  ) => ReactElement | undefined;
+  // For Input fields: render errors in the footer linked by ariaDescribedby.
+  errorMessageInFooter?: boolean | undefined;
   id?: string | undefined;
   getCustomElement?: (
     values: FormValues<TEntity>,
@@ -138,6 +143,8 @@ export default interface Field<TEntity> {
   ) => ReactElement | undefined; // custom element to render instead of the elements in the form.
   categoryCheckboxProps?: CategoryCheckboxProps | undefined; // props for the category checkbox component. If fieldType is CategoryCheckbox, this prop is required.
   dataTestId?: string | undefined;
+  autoComplete?: string | undefined;
+  ariaDescribedby?: string | undefined;
 
   // set this to true if you want to show this field in the form even when the form is in edit mode.
   doNotShowWhenEditing?: boolean | undefined;

package/UI/Components/Graphs/DayUptimeGraph.tsx

@@ -12,6 +12,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -65,7 +66,12 @@ export interface ComponentProps {
 const DayUptimeGraph: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [days, setDays] = useState<number>(0);
+  const days: number = useMemo(() => {
+    return OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
+      props.startDate,
+      props.endDate,
+    );
+  }, [props.startDate, props.endDate]);
 
   /*
    * The strip is one tab stop with a roving tabindex inside it - see
@@ -100,15 +106,6 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     barRefs.current[focusedBarIndex]?.focus();
   }, [focusedBarIndex]);
 
-  useEffect(() => {
-    setDays(
-      OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
-        props.startDate,
-        props.endDate,
-      ),
-    );
-  }, [props.startDate, props.endDate]);
-
   const activeBarIndex: number = DayUptimeGraphUtil.getActiveBarIndex({
     storedIndex: focusedBarIndex,
     barCount: days,
@@ -360,6 +357,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     return (
       <Tooltip
         key={dayNumber}
+        lazy={true}
         richContent={
           <UptimeBarTooltip
             date={todaysDay}

package/UI/Components/Icon/Icon.tsx

@@ -390,46 +390,14 @@ const Icon: FunctionComponent<ComponentProps> = ({
     );
   } else if (icon === IconProp.Pencil || icon === IconProp.Edit) {
     /*
-     * Edit is a pencil, and nothing else. It used to be a pencil drawn over a
-     * document outline, which at the 16px this icon is actually rendered at
-     * almost everywhere collapsed into a grey box with a diagonal through it -
-     * legible as "some kind of file thing", not as "change this". The pencil
-     * alone is what everybody already reads as edit, and it survives being
-     * small. IconProp.PencilSquare still draws the composite for the handful of
-     * places that want it.
-     *
-     * DRAWN AT 80% OF THE UPSTREAM HEROICON, and that is the whole point of
-     * this path existing rather than the stock one.
-     *
-     * Every icon here shares a 24x24 box, but the eye does not measure the
-     * box - it measures the ink. Heroicons' pencil is one unbroken diagonal
-     * from corner to corner, so its ink ran 26.8 units end to end: the
-     * longest stroke of any icon in this file, against a median of 21 and
-     * against the 20.5 of the Trash and the 19.9 of the List it sits beside
-     * in a table row. At the 20px a Button renders it at, that is a 22px
-     * stroke inside a 20px box - it overshot the cap height of its own label
-     * and read as a size larger than every button next to it.
-     *
-     * (Those figures are the longest distance across each glyph's drawn ink,
-     * with arcs and curves sampled. Common/Tests/UI/Components/
-     * IconOpticalSize.test.tsx measures the same quantity from the path
-     * VERTICES alone, which under-reads every icon by a fraction of a unit -
-     * so its numbers are smaller than these and its comparison is relative
-     * rather than absolute.)
-     *
-     * Scaling by 0.8 about the centre of the box brings the ink to 21.4 -
-     * between Trash and Copy, at the median - while keeping the glyph
-     * itself untouched: a uniform scale preserves the arc flags, the 45
-     * degree barrel, and the tangency of the nib and eraser arcs. The
-     * numbers stay exact (radii 1.5 and 3.6, tip at 4.2 19.8), and the
-     * stroke width deliberately does NOT scale, so the pencil keeps the same
-     * weight as its neighbours instead of thinning out.
+     * A short, wide barrel keeps the pencil legible beside button labels and
+     * table actions. Keep the shared stroke weight and 24px box for both aliases.
      */
     return getSvgWrapper(
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M15.89 5.99l1.35-1.35a1.5 1.5 0 112.122 2.122L7.866 18.256a3.6 3.6 0 01-1.518.904l-2.148.64.64-2.148a3.6 3.6 0 01.904-1.518L15.89 5.99zm0 0L18 8.1"
+        d="M14.5 5.5a2.828 2.828 0 0 1 4 4L10 18l-5 1 1-5 8.5-8.5ZM13 7l4 4"
       />,
     );
   } else if (icon === IconProp.Equals) {
@@ -3022,6 +2990,22 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M4.928 1.825c-1.09.553-1.09.64-.07 1.78 5.655 6.295 7.004 7.782 7.107 7.782.139.017 7.971-8.542 8.058-8.801.034-.07-.208-.312-.519-.536-.415-.312-.864-.433-1.712-.467-1.59-.104-2.144.242-4.115 2.455-.899 1.003-1.66 1.833-1.66 1.833-.017 0-.76-.813-1.642-1.798S8.473 2.1 8.127 1.91c-.796-.45-2.421-.484-3.2-.086zM1.297 4.367C.45 4.695 0 5.007 0 5.248c0 .121 1.331 1.678 2.94 3.459 1.625 1.78 2.939 3.268 2.939 3.302 0 .035-1.331 1.522-2.94 3.303C1.314 17.11.017 18.683.035 18.822c.086.467 1.504 1.055 2.541 1.055 1.678-.018 2.058-.312 5.603-4.202 1.78-1.954 3.233-3.614 3.233-3.666 0-.069-1.435-1.694-3.199-3.63-2.3-2.508-3.423-3.632-3.96-3.874-.812-.398-2.126-.467-2.956-.138zm18.467.12c-.502.26-1.764 1.505-3.943 3.891-1.763 1.937-3.199 3.562-3.199 3.631 0 .07 1.453 1.712 3.234 3.666 3.544 3.89 3.925 4.184 5.602 4.202 1.038 0 2.455-.588 2.542-1.055.017-.156-1.28-1.712-2.905-3.493-1.608-1.78-2.94-3.285-2.94-3.32 0-.034 1.332-1.539 2.94-3.32C22.72 6.91 24.017 5.352 24 5.214c-.087-.45-1.366-.968-2.473-1.038-.795-.034-1.21.035-1.763.312zM7.954 16.973c-2.144 2.369-3.908 4.374-3.943 4.46-.034.07.208.312.52.537.414.311.864.432 1.711.467 1.574.103 2.161-.26 4.15-2.508.864-.968 1.608-1.78 1.625-1.78s.761.812 1.643 1.798c2.023 2.248 2.559 2.576 4.132 2.49.848-.035 1.297-.156 1.712-.467.311-.225.553-.467.519-.536-.087-.26-7.92-8.819-8.058-8.801-.069 0-1.867 1.954-4.011 4.34z"
       />,
     );
+  } else if (icon === IconProp.VMware) {
+    /*
+     * VMware — hypervisor mark: a host chassis with three virtual machines
+     * stacked on the hypervisor layer. Drawn in the outlined house style
+     * (currentColor stroke) so it sits at 16px next to the other resource
+     * brand logos (Proxmox / Ceph / Docker) without a filled wordmark.
+     */
+    return getSvgWrapper(
+      <>
+        <rect x="3" y="4" width="18" height="16" rx="2" />
+        <path strokeLinecap="round" d="M3 16h18" />
+        <rect x="6" y="7" width="3" height="6" rx="0.75" />
+        <rect x="10.5" y="7" width="3" height="6" rx="0.75" />
+        <rect x="15" y="7" width="3" height="6" rx="0.75" />
+      </>,
+    );
   } else if (icon === IconProp.IoT) {
     // IoT — wireless/connectivity mark (reuses the Signal icon path).
     return getSvgWrapper(

package/UI/Components/Input/Input.tsx

@@ -85,10 +85,19 @@ const Input: FunctionComponent<ComponentProps> = (
   }
 
   const [value, setValue] = useState<string | Date>("");
-  const [displayValue, setDisplayValue] = useState<string>("");
+
+  /*
+   * Only dates need a display form that differs from the stored value, and
+   * working it out means parsing, so it stays in state behind an effect.
+   * Text keeps no second copy - see the comment on displayValue below.
+   */
+  const [dateDisplayValue, setDateDisplayValue] = useState<string>("");
   const ref: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
 
+  const isDateInput: boolean =
+    props.type === InputType.DATE || props.type === InputType.DATETIME_LOCAL;
+
   useEffect(() => {
     if (
       props.type === InputType.DATE ||
@@ -105,7 +114,7 @@ const Input: FunctionComponent<ComponentProps> = (
         } catch (e: any) {
           Logger.error(e);
         }
-        setDisplayValue(dateString);
+        setDateDisplayValue(dateString);
       } else if (
         value &&
         (value as any).includes &&
@@ -123,21 +132,47 @@ const Input: FunctionComponent<ComponentProps> = (
         } catch (err: any) {
           Logger.error(err);
         }
-        setDisplayValue(dateString);
+        setDateDisplayValue(dateString);
       } else if (
         !value ||
         ((value as any).includes && !(value as any).includes(" - "))
       ) {
-        setDisplayValue("");
+        setDateDisplayValue("");
       }
-    } else {
-      setDisplayValue(value as string);
     }
   }, [value]);
 
+  /*
+   * For text the display value IS the value, derived here rather than kept in
+   * a second piece of state, and that is load-bearing rather than tidiness.
+   *
+   * This <input> is uncontrolled - React never writes its `value` attribute -
+   * so the effect below is the only thing keeping the DOM and this component
+   * in step. When the display value was its own state it settled one render
+   * behind `value`, and anything that interleaved a render between those two
+   * commits (a parent re-rendering while the user typed, which is exactly what
+   * the invite form does on every keystroke) made the effect write the older
+   * copy back over text the browser already held. The character typed in that
+   * window disappeared - the "typed characters vanish as I type" half of the
+   * invite-user bug, and a silent character-eater in every form in the product.
+   *
+   * Derived, the two can no longer drift: `setValue` runs synchronously in the
+   * change handler, so by the time any render commits, this already equals
+   * what the user typed.
+   */
+  const displayValue: string = isDateInput
+    ? dateDisplayValue
+    : (value as string) || "";
+
   useEffect(() => {
     const input: HTMLInputElement | null = ref.current;
-    if (input) {
+
+    /*
+     * Never write when it would not change anything: assigning to input.value
+     * moves the caret to the end, so an unconditional write reorders text
+     * whenever someone edits in the middle of a field.
+     */
+    if (input && input.value !== displayValue) {
       input.value = displayValue;
     }
   }, [ref, displayValue]);