feat(pos-add-relation): update current value on input

Author: angelo-v

elements/src/components/pos-add-relation/pos-add-relation.spec.tsx

@@ -95,6 +95,7 @@ describe('pos-add-relation', () => {
 
     // when the user enters a URI
     const input = page.root.querySelector('input');
+    fireEvent.input(input, { target: { value: 'https://alice.test/profile/card#me' } });
     fireEvent.change(input, { target: { value: 'https://alice.test/profile/card#me' } });
 
     // then the relation is added

elements/src/components/pos-add-relation/pos-add-relation.tsx

@@ -40,8 +40,8 @@ export class PosAddRelation {
     this.selectedTermUri = event.detail.uri;
   }
 
-  async save(event) {
-    await this.os.addRelation(this.resource, this.selectedTermUri, event.target.value);
+  async save() {
+    await this.os.addRelation(this.resource, this.selectedTermUri, this.currentValue);
     this.currentValue = '';
   }
 
@@ -56,10 +56,11 @@ export class PosAddRelation {
         <input
           ref={el => (this.valueInput = el)}
           value={this.currentValue}
+          onInput={ev => (this.currentValue = (ev.target as HTMLInputElement).value)}
           type="url"
           aria-label="URI"
           placeholder=""
-          onChange={ev => this.save(ev)}
+          onChange={() => this.save()}
         ></input>
       </Host>
     );