User input doesn't work with multiply user selection

src/packages/ce/src/member/pages/MemberAddPage.tsx

@@ -7,8 +7,7 @@ import {useParams, useRouter} from "next/navigation";
 import {Namespace, User} from "@code0-tech/sagittarius-graphql-types";
 import Link from "next/link";
 import {UserService} from "@edition/user/services/User.service";
-import {InputSyntaxSegment} from "@code0-tech/pictor/dist/components/form/Input.syntax.hook";
-import {UserInputComponent} from "@edition/user/components/UserInputComponent";
+import {UserInputComponent, UserSyntaxSegment} from "@edition/user/components/UserInputComponent";
 import {addIslandSuccessNotification} from "@code0-tech/pictor/dist/components/island/Island.hook";
 
 export const MemberAddPage: React.FC = () => {
@@ -32,13 +31,13 @@ export const MemberAddPage: React.FC = () => {
         }
     }, [members])
 
-    const [inputs, validate] = useForm<{ users: null | InputSyntaxSegment[] }>({
+    const [inputs, validate] = useForm<{ users: null | UserSyntaxSegment[] }>({
         useInitialValidation: false,
         initialValues: formInitialValues,
         validate: {
             users: (value) => {
                 if (!value) return "Please select at least one user"
-                if (value.length <= 0) return "Please select at least one user"
+                if (value.filter(segment => segment.type === "block").length <= 0) return "Please select at least one user"
                 return null
             }
         },
@@ -47,7 +46,9 @@ export const MemberAddPage: React.FC = () => {
 
                 const payload = await memberService.memberBulkInvite({
                     namespaceId: namespaceId!!,
-                    userIds: values.users!!.map((value) => (value.value).id!!)
+                    userIds: values.users!!
+                        .filter(segment => segment.type === "block")
+                        .map(segment => segment.valueData!!.id!!)
                 })
 
                 if ((payload?.errors?.length ?? 0) <= 0) {

src/packages/ce/src/member/services/Member.service.ts

@@ -27,7 +27,6 @@ export type MemberDependencies = {
 export class MemberService extends ReactiveArrayService<NamespaceMember, MemberDependencies> {
 
     private readonly client: GraphqlClient
-    private i = 0
 
     constructor(client: GraphqlClient, store: ReactiveArrayStore<View<NamespaceMember>>) {
         super(store)
@@ -55,7 +54,7 @@ export class MemberService extends ReactiveArrayService<NamespaceMember, MemberD
                 const nodes = res.data?.namespace?.members?.nodes ?? []
                 nodes.forEach(member => {
                     if (member && !this.hasById(member.id)) {
-                        this.set(this.i++, new View(member))
+                        this.add(new View(member))
                     }
                 })
             })
@@ -65,7 +64,7 @@ export class MemberService extends ReactiveArrayService<NamespaceMember, MemberD
     }
 
     hasById(id: NamespaceMember["id"]): boolean {
-        const member = super.values().find(o => o.id === id)
+        const member = super.values().find(o => o?.id === id)
         return member !== undefined
     }
 
@@ -87,7 +86,7 @@ export class MemberService extends ReactiveArrayService<NamespaceMember, MemberD
 
         if (result.data && result.data.namespacesMembersAssignRoles) {
             const currentMember = this.getById(payload.memberId)
-            const index = super.values().findIndex(m => m.id === payload.memberId)
+            const index = super.values().findIndex(m => m?.id === payload.memberId)
 
             const newMember: NamespaceMember = {
                 ...currentMember,
@@ -113,8 +112,8 @@ export class MemberService extends ReactiveArrayService<NamespaceMember, MemberD
 
         if (result.data && result.data.namespacesMembersDelete && result.data.namespacesMembersDelete.namespaceMember) {
             const member = result.data.namespacesMembersDelete.namespaceMember
-            const index = super.values().findIndex(m => m.id == member.id)
-            this.delete(index)
+            const index = super.values().findIndex(m => m?.id == member.id)
+            if (index >= 0) this.delete(index)
         }
 
         return result.data?.namespacesMembersDelete ?? undefined
@@ -130,7 +129,7 @@ export class MemberService extends ReactiveArrayService<NamespaceMember, MemberD
 
         result.data?.namespacesMembersBulkInvite?.namespaceMembers?.forEach(member => {
             if (!this.hasById(member.id)) {
-                this.set(this.i++, new View(member))
+                this.add(new View(member))
             }
         })
 

src/packages/ce/src/user/components/UserInputComponent.tsx

@@ -21,6 +21,8 @@ export interface UserInputComponentProps extends TextInputProps {
     filter?: (user: User, index: number) => boolean
 }
 
+export type UserSyntaxSegment = InputSyntaxSegment & { valueData?: User }
+
 export const UserInputComponent: React.FC<UserInputComponentProps> = (props) => {
 
     const {filter = () => true, ...rest} = props
@@ -43,15 +45,19 @@ export const UserInputComponent: React.FC<UserInputComponentProps> = (props) =>
     const transformSyntax = (
         _?: string | null,
         appliedParts: (InputSuggestion | any)[] = [],
-    ): InputSyntaxSegment[] => {
+    ): UserSyntaxSegment[] => {
 
         let cursor = 0
 
         return appliedParts.map((part: string | InputSuggestion, index) => {
             if (typeof part === "object") {
                 const segment = {
                     type: "block",
-                    value: part.valueData,
+                    // value must stay the raw suggestion value (username) so pictor can
+                    // re-match the segment to its token on re-serialization; the User
+                    // object travels alongside in valueData
+                    value: part.value,
+                    valueData: part.valueData,
                     start: cursor,
                     end: cursor + part.value.length,
                     visualLength: 1,
@@ -81,7 +87,7 @@ export const UserInputComponent: React.FC<UserInputComponentProps> = (props) =>
             }
             cursor += textString.length
             return {}
-        }) as InputSyntaxSegment[]
+        }) as UserSyntaxSegment[]
     }
 
     return <TextInput placeholder={"Enter users"}