Save inputs

microsoft · Nov 2, 2019 · 0aa1a34 · 0aa1a34
1 parent 782297d
commit 0aa1a34
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 17 deletions.
diff --git a/...mage_snapshots__/chrome-docker/adaptive-cards-js-disable-card-inputs-1-snap.png b/...mage_snapshots__/chrome-docker/adaptive-cards-js-disable-card-inputs-1-snap.png
diff --git a/...mage_snapshots__/chrome-docker/adaptive-cards-js-disable-card-inputs-2-snap.png b/...mage_snapshots__/chrome-docker/adaptive-cards-js-disable-card-inputs-2-snap.png
diff --git a/...mage_snapshots__/chrome-docker/adaptive-cards-js-disable-card-inputs-3-snap.png b/...mage_snapshots__/chrome-docker/adaptive-cards-js-disable-card-inputs-3-snap.png
diff --git a/__tests__/adaptiveCards.js b/__tests__/adaptiveCards.js
@@ -58,16 +58,29 @@ test('disable card inputs', async () => {
   await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
 
   await driver.executeScript(() => {
-    document.querySelector('.ac-input input[type="checkbox"]').checked = true;
+    document.querySelector('.ac-adaptiveCard input[type="checkbox"]').checked = true;
+    document.querySelector('.ac-adaptiveCard input[type="date"]').value = '2019-11-01';
+    document.querySelector('.ac-adaptiveCard input[type="radio"]').checked = true;
+    document.querySelector('.ac-adaptiveCard input[type="text"]').value = 'William';
+    document.querySelector('.ac-adaptiveCard input[type="time"]').value = '12:34';
+    document.querySelector('.ac-adaptiveCard select').value = '1';
+    document.querySelector('.ac-adaptiveCard textarea').value = 'One Redmond Way, Redmond, WA';
   });
 
   expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
 
   await pageObjects.updateProps({ disabled: true });
 
+  // Click "Submit" button should have no effect
+  await driver.executeScript(() => {
+    document.querySelector('.ac-actionSet button:nth-of-type(2)').click();
+  });
+
   expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
 
   await pageObjects.updateProps({ disabled: false });
+
+  // Click "Submit" button should send values to the bot
   await driver.executeScript(() => {
     document.querySelector('.ac-actionSet button:nth-of-type(2)').click();
   });

diff --git a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.js b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.js
@@ -13,6 +13,55 @@ function isPlainObject(obj) {
   return Object.getPrototypeOf(obj) === Object.prototype;
 }
 
+function disableInputElements(element) {
+  const hyperlinks = element.querySelectorAll('a');
+  const inputs = element.querySelectorAll('button, input, select, textarea');
+
+  const disabledHandler = event => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+  };
+
+  [].forEach.call(inputs, input => {
+    input.disabled = true;
+  });
+
+  [].forEach.call(hyperlinks, hyperlink => {
+    hyperlink.addEventListener('click', disabledHandler);
+  });
+}
+
+function restoreInputValues(element, inputValues) {
+  const inputs = element.querySelectorAll('input, select, textarea');
+
+  [].forEach.call(inputs, (input, index) => {
+    const value = inputValues[index];
+
+    if (typeof value !== 'undefined') {
+      const { tagName, type } = input;
+
+      if (tagName === 'INPUT' && (type === 'checkbox' || type === 'radio')) {
+        input.checked = value;
+      } else {
+        input.value = value;
+      }
+    }
+  });
+}
+
+function saveInputValues(element) {
+  const inputs = element.querySelectorAll('input, select, textarea');
+
+  return [].map.call(inputs, ({ checked, tagName, type, value }) => {
+    if (tagName === 'INPUT' && (type === 'checkbox' || type === 'radio')) {
+      return checked;
+    }
+
+    return value;
+  });
+}
+
 const AdaptiveCardRenderer = ({
   adaptiveCard,
   adaptiveCardHostConfig,
@@ -25,6 +74,7 @@ const AdaptiveCardRenderer = ({
   const [{ adaptiveCardRenderer: adaptiveCardRendererStyleSet }] = useStyleSet();
   const [error, setError] = useState();
   const contentRef = useRef();
+  const inputValuesRef = useRef([]);
 
   const handleClick = useCallback(
     ({ target }) => {
@@ -128,22 +178,8 @@ const AdaptiveCardRenderer = ({
 
       error && setError(null);
 
-      if (disabled) {
-        const hyperlinks = element.querySelectorAll('a');
-        const inputs = element.querySelectorAll('button, input, select, textarea');
-
-        [].forEach.call(inputs, input => {
-          input.disabled = true;
-        });
-
-        [].forEach.call(hyperlinks, hyperlink => {
-          hyperlink.addEventListener('click', event => {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            event.stopPropagation();
-          });
-        });
-      }
+      disabled && disableInputElements(element);
+      restoreInputValues(element, inputValuesRef.current);
 
       const [firstChild] = current.children;
 
@@ -152,6 +188,10 @@ const AdaptiveCardRenderer = ({
       } else {
         current.appendChild(element);
       }
+
+      return () => {
+        inputValuesRef.current = saveInputValues(element);
+      };
     }
   }, [adaptiveCard, adaptiveCardHostConfig, contentRef, disabled, error, handleExecuteAction, renderMarkdown]);