fix #7086

packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx

@@ -133,3 +133,20 @@ export const WithAllPosibleWidget = createExample(TestedComponent, {
     widget: w,
   })),
 } as ReducerState);
+
+export const WithAutocompleteFeature = createExample(TestedComponent, {
+  ...reducerStatesExample.backupAttributeEditing,
+  required_attributes: [
+    {
+      name: "ahv_number",
+      label: "AHV Number",
+      type: "string",
+      uuid: "asdasdsa1",
+      widget: "wid",
+      "validation-regex":
+        "^(756)\\.[0-9]{4}\\.[0-9]{4}\\.[0-9]{2}|(756)[0-9]{10}$",
+      "validation-logic": "CH_AHV_check",
+      autocomplete: "???.????.????.??",
+    },
+  ],
+} as ReducerState);

packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx

@@ -37,12 +37,27 @@ export function AttributeEntryScreen(): VNode {
   const fieldList: VNode[] = reqAttr.map((spec, i: number) => {
     const value = attrs[spec.name];
     const error = checkIfValid(value, spec);
+
+    function addAutocomplete(newValue: string): string {
+      const ac = spec.autocomplete;
+      if (!ac || ac.length < newValue.length || ac[newValue.length] === "?")
+        return newValue;
+
+      if (!value || newValue.length < value.length) {
+        return newValue.slice(0, -1);
+      }
+
+      return newValue + ac[newValue.length];
+    }
+
     hasErrors = hasErrors || error !== undefined;
     return (
       <AttributeEntryField
         key={i}
         isFirst={i == 0}
-        setValue={(v: string) => setAttrs({ ...attrs, [spec.name]: v })}
+        setValue={(v: string) =>
+          setAttrs({ ...attrs, [spec.name]: addAutocomplete(v) })
+        }
         spec={spec}
         errorMessage={error}
         onConfirm={() => {