fix(todo): make blur event always working in editing

willkuerlich · Jul 26, 2021 · 47cb397 · 47cb397
1 parent c3df780
commit 47cb397
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/cypress/integration/todo_spec.ts b/cypress/integration/todo_spec.ts
@@ -42,12 +42,26 @@ describe('todo', () => {
       it('should edit an item', function () {
         cy.get('.todo-list>li:first-child label').dblclick();
         cy.wait(50);
-        cy.get('.todo-list>li:first-child input.edit').type('123{enter}');
+        cy.get('.todo-list>li:first-child input.edit').focused().type('123{enter}');
         cy.get('.todo-list>li:first-child').should((item: any) =>
           expect(item).to.have.text('Read Qwik docs123')
         );
       });
 
+      it('should blur input.edit element', function () {
+        cy.get('.todo-list>li:first-child label').dblclick();
+        cy.wait(50);
+
+        // Focused input.edit element with a proper cursor position after dblclick event
+        cy.get('.todo-list>li:first-child input.edit')
+          .focused()
+          .should('have.prop', 'selectionStart', 14)
+          .and('have.prop', 'selectionEnd', 14);
+
+        // Blur input.edit element
+        cy.get('.todo-list>li:first-child input.edit').blur().should('have.length', 0);
+      });
+
       it('should clear completed', () => {
         cy.get('.todo-count > strong').should((strong) => expect(strong).to.have.text('3'));
         cy.get('.todo-list>li:first-child input[type=checkbox]').click();

diff --git a/integration/todo/ui/Item_edit.ts b/integration/todo/ui/Item_edit.ts
@@ -20,9 +20,15 @@ import { ItemComponent } from './Item_component';
 
 export const begin = injectEventHandler(
   ItemComponent, //
-  async function (this: ItemComponent) {
+  provideEntity<ItemEntity>(provideUrlProp('itemKey') as any as Provider<EntityKey<ItemEntity>>), // TODO fix cast
+  async function (this: ItemComponent, itemEntity: ItemEntity) {
     this.editing = true;
-    markDirty(this);
+    await markDirty(this);
+    // focus input element
+    const inputEl = this.$host.querySelector('input.edit') as HTMLInputElement;
+    inputEl.focus();
+    // move cursor to the end
+    inputEl.selectionStart = inputEl.selectionEnd = itemEntity.$state.title.length;
   }
 );
 

diff --git a/integration/todo/ui/Item_template.tsx b/integration/todo/ui/Item_template.tsx
@@ -35,14 +35,14 @@ export default injectMethod(
             checked={item.completed}
             on:click={QRL`ui:/Item_toggle#?toggleState=.target.checked`}
           />
-          <label on:dblclick={QRL`ui:/Item_edit#begin`}>{item.title}</label>
+          <label on:dblclick={QRL`ui:/Item_edit#begin?itemKey=${itemKey}`}>{item.title}</label>
           <button class="destroy" on:click={QRL`ui:/Item_remove#?itemKey=${itemKey}`}></button>
         </div>
         {this.editing ? (
           <input
             class="edit"
             value={item.title}
-            on:blur={QRL`ui:/Item_edit#end`} // TODO: investigate why this sometimes does not fire
+            on:blur={QRL`ui:/Item_edit#end`}
             on:keyup={QRL`ui:/Item_edit#change?value=.target.value&code=.code&itemKey=${itemKey}`}
           />
         ) : null}