Newlines, textfield sets the cursor position appropriately

UI/Input/MultiLingualTextFields.ts

@@ -6,13 +6,11 @@ export default class MultiLingualTextFields extends InputElement<any> {
     private _fields: Map<string, TextField> = new Map<string, TextField>();
     private readonly _value: UIEventSource<any>;
     public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
-
     constructor(languages: UIEventSource<string[]>,
                 textArea: boolean = false,
                 value: UIEventSource<Map<string, UIEventSource<string>>> = undefined) {
         super(undefined);
         this._value = value ?? new UIEventSource({});
-
         this._value.addCallbackAndRun(latestData => {
             if (typeof (latestData) === "string") {
                 console.warn("Refusing string for multilingual input", latestData);

UI/Input/MultiTagInput.ts

@@ -4,7 +4,6 @@ import {MultiInput} from "./MultiInput";
 
 export class MultiTagInput extends MultiInput<string> {
 
-
     constructor(value: UIEventSource<string[]> = new UIEventSource<string[]>([])) {
         super("Add a new tag",
             () => "",

UI/Input/RadioButton.ts

@@ -12,7 +12,6 @@ export class RadioButton<T> extends InputElement<T> {
     private readonly _elements: InputElement<T>[]
     private readonly _selectFirstAsDefault: boolean;
     
-
     constructor(elements: InputElement<T>[],
                 selectFirstAsDefault = true) {
         super(undefined);
@@ -20,7 +19,6 @@ export class RadioButton<T> extends InputElement<T> {
         this._selectFirstAsDefault = selectFirstAsDefault;
         const self = this;
 
-
         this.value =
             UIEventSource.flatten(this._selectedElementIndex.map(
                 (selectedIndex) => {

UI/Input/SingleTagInput.ts

@@ -22,7 +22,6 @@ export default class SingleTagInput extends InputElement<string> {
     constructor(value: UIEventSource<string> = undefined) {
         super(undefined);
         this._value = value ?? new UIEventSource<string>("");
-
         this.helpMessage = new VariableUiElement(this._value.map(tagDef => {
                 try {
                     FromJSON.Tag(tagDef, "");

UI/Input/TextField.ts

@@ -52,7 +52,6 @@ export class TextField extends InputElement<string> {
             field.value = t;
         });
         this.dumbMode = false;
-        this.SetClass("deadbeef")
     }
 
     GetValue(): UIEventSource<string> {
@@ -72,18 +71,18 @@ export class TextField extends InputElement<string> {
             `</form></span>`;
     }
     
-    Update() {
-        console.log("Updating TF")
-        super.Update();
-    }
 
     InnerUpdate() {
-        console.log("Inner Updating TF")
         const field = document.getElementById("txt-" + this.id);
         const self = this;
         field.oninput = () => {
+            // @ts-ignore
+            var endDistance = field.value.length - field.selectionEnd;
             // @ts-ignore
             self.value.setData(field.value);
+            // Setting the value might cause the value to be set again. We keep the distance _to the end_ stable, as phone number formatting might cause the start to change
+            // See https://github.com/pietervdvn/MapComplete/issues/103
+            self.SetCursorPosition(field.value.length - endDistance);
         };
 
         if (this.value.data !== undefined && this.value.data !== null) {
@@ -105,7 +104,7 @@ export class TextField extends InputElement<string> {
     }
 
     public SetCursorPosition(i: number) {
-        const field = document.getElementById('text-' + this.id);
+        const field = document.getElementById('txt-' + this.id);
         if(field === undefined || field === null){
             return;
         }
@@ -116,6 +115,7 @@ export class TextField extends InputElement<string> {
         field.focus();
         // @ts-ignore
         field.setSelectionRange(i, i);
+
     }
 
     IsValid(t: string): boolean {

UI/Input/ValidatedTextField.ts

@@ -90,7 +90,7 @@ export default class ValidatedTextField {
                 return parsePhoneNumberFromString(str, country?.toUpperCase())?.isValid() ?? false
             },
             (str, country: any) => {
-                console.log("country formatting", country)
+                console.log("reformatting phone nuber",str, "for locale", country)
                 return parsePhoneNumberFromString(str, country?.toUpperCase()).formatInternational()
             }
         )