fix: rework event handling in gv-rating-list to fix click on `Answer …

…button` gravitee-io/issues#6869
gravitee-io · May 20, 2022 · 238c6a5 · 238c6a5
1 parent 42fe2dc
commit 238c6a5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 15 deletions.
diff --git a/src/molecules/gv-rating-list/gv-rating-list.js b/src/molecules/gv-rating-list/gv-rating-list.js
@@ -176,6 +176,7 @@ export class GvRatingList extends LitElement {
       addAnswer: false,
       deleteAnswer: false,
     };
+    this._hasValidAnswer = false;
   }
 
   set ratings(value) {
@@ -207,7 +208,7 @@ export class GvRatingList extends LitElement {
     e.stopPropagation();
     this._ratings.forEach((rating) => (rating._edit = false));
     rating._edit = true;
-    this.performUpdate();
+    this.requestUpdate();
   }
 
   _getAnswerValue() {
@@ -225,20 +226,22 @@ export class GvRatingList extends LitElement {
     }
   }
 
-  _hasValidAnswer() {
-    const answer = this._getAnswerValue();
-    return answer.trim().length > 0;
-  }
-
   _onClose(rating) {
     delete rating._edit;
-    this.performUpdate();
+    this._hasValidAnswer = false;
+    this.requestUpdate();
   }
 
   _renderAnswer(rating, answer) {
     return html`<div class="answer">${this._render(answer, rating)}</div>`;
   }
 
+  _onResponseInput() {
+    const answer = this._getAnswerValue();
+    this._hasValidAnswer = answer.trim().length > 0;
+    this.requestUpdate();
+  }
+
   _renderAnswers(rating) {
     return html` ${rating.answers
       ? html` ${this._canAddAnswer()
@@ -249,10 +252,15 @@ export class GvRatingList extends LitElement {
           ${rating._edit
             ? html`
                 <div class="answer answer-form">
-                  <gv-text rows="4" label="${i18n('gv-rating-list.answerLabel')}" required @input="${this.performUpdate}"></gv-text>
+                  <gv-text
+                    rows="4"
+                    label="${i18n('gv-rating-list.answerLabel')}"
+                    required
+                    @input="${this._onResponseInput.bind(this)}"
+                  ></gv-text>
                   <div class="actions">
                     <gv-button primary outlined @click="${this._onClose.bind(this, rating)}">${i18n('gv-rating-list.cancel')}</gv-button>
-                    <gv-button primary @click="${this._onAnswer.bind(this, rating)}" .disabled="${!this._hasValidAnswer()}"
+                    <gv-button primary @click="${this._onAnswer.bind(this, rating)}" .disabled="${!this._hasValidAnswer}"
                       >${i18n('gv-rating-list.send')}</gv-button
                     >
                   </div>

diff --git a/src/molecules/gv-rating-list/gv-rating-list.stories.js b/src/molecules/gv-rating-list/gv-rating-list.stories.js
@@ -16,6 +16,8 @@
 import './gv-rating-list';
 import { makeStory } from '../../../testing/lib/make-story';
 import avatar from '../../../assets/images/avatar.png';
+import { deepClone } from '../../lib/utils';
+import { wait } from '../../../testing/lib/sequence';
 
 const title = 'Top API !';
 const comment =
@@ -53,37 +55,56 @@ const conf = {
 };
 
 export const Readonly = makeStory(conf, {
-  items: [{ ratings, user: author }],
+  items: [{ ratings: deepClone(ratings), user: author }],
 });
 
 export const Empty = makeStory(conf, {
   items: [{ ratings: [], user: author }],
 });
 
 export const UpdateRating = makeStory(conf, {
-  items: [{ ratings, user: author, permissions: { update: [1, 3, 5] } }],
+  items: [{ ratings: deepClone(ratings), user: author, permissions: { update: [1, 3, 5] } }],
   docs: `
     \`permissions.update\` properties supports booleans or arrays of rating identifier
     In this case, \`update = [1, 3, 5]\`, we cannot update the rating of the second and fourth element.
   `,
 });
 
 export const DeleteRating = makeStory(conf, {
-  items: [{ ratings, user: author, permissions: { delete: [2, 3, 4] } }],
+  items: [{ ratings: deepClone(ratings), user: author, permissions: { delete: [2, 3, 4] } }],
   docs: `
     \`permissions.update\` properties supports booleans or arrays of rating identifier
     In this case, \`update = [2, 3, 4]\`, we cannot delete the rating of the first and last element.
   `,
 });
 
 export const AddAnswer = makeStory(conf, {
-  items: [{ ratings, user: author, permissions: { addAnswer: true } }],
+  items: [{ ratings: deepClone(ratings), user: author, permissions: { addAnswer: true } }],
+  play: async ({ component }) => {
+    // First, click on button to open the textarea
+    component.shadowRoot.querySelector('a').click();
+    await wait(100);
+
+    // Find the textarea and simulate some inputs
+    const textArea = component.shadowRoot.querySelector('gv-text').shadowRoot.querySelector('textarea');
+    textArea.focus();
+    textArea.value = 'Awesome !';
+    // Trigger an input event to trigger the validation + button state update
+    textArea.dispatchEvent(
+      new Event('input', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    await component.requestUpdate();
+  },
 });
 
 export const DeleteAnswer = makeStory(conf, {
-  items: [{ ratings, user: author, permissions: { deleteAnswer: true } }],
+  items: [{ ratings: deepClone(ratings), user: author, permissions: { deleteAnswer: true } }],
 });
 
 export const Everything = makeStory(conf, {
-  items: [{ ratings, user: author, permissions: { update: true, delete: true, addAnswer: true, deleteAnswer: true } }],
+  items: [{ ratings: deepClone(ratings), user: author, permissions: { update: true, delete: true, addAnswer: true, deleteAnswer: true } }],
 });