feat(adaptive-cards): enable default browser validation of input fields

webex · Mar 31, 2022 · a9b9b28 · a9b9b28
1 parent 0c88533
commit a9b9b28
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 6 deletions.
diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx
@@ -170,6 +170,17 @@ export default function AdaptiveCard({
     setInputs((prevInputs) => ({...prevInputs, [input.id]: input}));
   }, [setInputs]);
 
+  const setInputBrowserControlRef = useCallback((id, browserRef) => {
+    setInputs((prevInputs) => {
+      const input = prevInputs[id];
+
+      return {
+        ...prevInputs,
+        [id]: {...input, browserRef},
+      };
+    });
+  }, [setInputs]);
+
   const getValue = (id, defval = '') => ((id in inputs && inputs[id].value !== undefined) ? inputs[id].value : defval);
 
   const getAllValues = () => mapValues(inputs, (input) => (input.value));
@@ -197,6 +208,8 @@ export default function AdaptiveCard({
         error = input.errorMessage || `The value you entered must match the pattern ${input.regex}`;
       } else if (String(input.value).length > input.maxLength) {
         error = `Maximum length is ${input.maxLength}`;
+      } else if (input.browserRef && !input.browserRef.checkValidity()) {
+        error = 'The value you entered is invalid.';
       }
 
       return {...input, error};
@@ -220,6 +233,7 @@ export default function AdaptiveCard({
         getError,
         validate,
         submit,
+        setInputBrowserControlRef,
         invalidSubmit,
         setElement,
         setIsVisible,

diff --git a/src/components/adaptive-cards/InputDate/InputDate.jsx b/src/components/adaptive-cards/InputDate/InputDate.jsx
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
 import {formatDateTime} from '../util';
@@ -22,9 +22,12 @@ export default function InputDate({data, className, style}) {
     setValue,
     getValue,
     setInput,
+    setInputBrowserControlRef,
     getError,
   } = useContext(AdaptiveCardContext);
 
+  const [browserControlRef, setBrowserControlRef] = useState(undefined);
+
   useEffect(() => {
     setInput({
       id: data.id,
@@ -44,6 +47,10 @@ export default function InputDate({data, className, style}) {
     setInput,
   ]);
 
+  useEffect(() => {
+    setInputBrowserControlRef(data.id, browserControlRef);
+  }, [browserControlRef, data.id, setInputBrowserControlRef]);
+
   return (
     <DateInput
       className={cssClasses}
@@ -54,6 +61,7 @@ export default function InputDate({data, className, style}) {
       error={getError(data.id)}
       required={data.isRequired}
       label={formatDateTime(data.label)}
+      onBrowserControlRef={(inputRef) => setBrowserControlRef(inputRef)}
       onChange={(value) => setValue(data.id, value)}
     />
   );

diff --git a/src/components/adaptive-cards/InputNumber/InputNumber.jsx b/src/components/adaptive-cards/InputNumber/InputNumber.jsx
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
 import AdaptiveCardContext from '../context/adaptive-card-context';
@@ -22,9 +22,12 @@ export default function InputNumber({data, className, style}) {
     setValue,
     getValue,
     setInput,
+    setInputBrowserControlRef,
     getError,
   } = useContext(AdaptiveCardContext);
 
+  const [browserControlRef, setBrowserControlRef] = useState(undefined);
+
   useEffect(() => {
     setInput({
       id: data.id,
@@ -44,13 +47,18 @@ export default function InputNumber({data, className, style}) {
     setInput,
   ]);
 
+  useEffect(() => {
+    setInputBrowserControlRef(data.id, browserControlRef);
+  }, [browserControlRef, data.id, setInputBrowserControlRef]);
+
   return (
     <NumberInput
       className={cssClasses}
       error={getError(data.id)}
       label={formatDateTime(data.label)}
       max={data.max}
       min={data.min}
+      onBrowserControlRef={(inputRef) => setBrowserControlRef(inputRef)}
       onChange={(value) => setValue(data.id, value)}
       placeholder={data.placeholder}
       required={data.isRequired}

diff --git a/src/components/adaptive-cards/InputText/InputText.jsx b/src/components/adaptive-cards/InputText/InputText.jsx
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
 import AdaptiveCardContext from '../context/adaptive-card-context';
@@ -24,11 +24,13 @@ export default function InputText({data, className, style}) {
     setValue,
     getValue,
     setInput,
+    setInputBrowserControlRef,
     getError,
   } = useContext(AdaptiveCardContext);
   const [cssClasses, sc] = webexComponentClasses('adaptive-cards-input-text', className);
   const Input = data.style === 'password' ? PasswordInput : TextInput;
   const inlineAction = useAction(data.inlineAction);
+  const [browserControlRef, setBrowserControlRef] = useState(undefined);
 
   useEffect(() => {
     setInput({
@@ -49,6 +51,10 @@ export default function InputText({data, className, style}) {
     setInput,
   ]);
 
+  useEffect(() => {
+    setInputBrowserControlRef(data.id, browserControlRef);
+  }, [browserControlRef, data.id, setInputBrowserControlRef]);
+
   return (
     <div className={cssClasses} style={style}>
       {!data.isMultiline ? (
@@ -57,6 +63,7 @@ export default function InputText({data, className, style}) {
           error={getError(data.id)}
           label={formatDateTime(data.label)}
           maxLength={data.maxLength}
+          onBrowserControlRef={(inputRef) => setBrowserControlRef(inputRef)}
           onChange={(value) => setValue(data.id, value)}
           pattern={data.regex}
           placeholder={data.placeholder}

diff --git a/src/components/adaptive-cards/InputTime/InputTime.jsx b/src/components/adaptive-cards/InputTime/InputTime.jsx
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
 import {acPropTypes, registerComponent} from '../Component/Component';
@@ -22,9 +22,12 @@ export default function InputTime({data, className, style}) {
     setValue,
     getValue,
     setInput,
+    setInputBrowserControlRef,
     getError,
   } = useContext(AdaptiveCardContext);
 
+  const [browserControlRef, setBrowserControlRef] = useState(undefined);
+
   useEffect(() => {
     setInput({
       id: data.id,
@@ -44,6 +47,10 @@ export default function InputTime({data, className, style}) {
     setInput,
   ]);
 
+  useEffect(() => {
+    setInputBrowserControlRef(data.id, browserControlRef);
+  }, [browserControlRef, data.id, setInputBrowserControlRef]);
+
   return (
     <TimeInput
       className={cssClasses}
@@ -54,6 +61,7 @@ export default function InputTime({data, className, style}) {
       error={getError(data.id)}
       required={data.isRequired}
       label={formatDateTime(data.label)}
+      onBrowserControlRef={(inputRef) => setBrowserControlRef(inputRef)}
       onChange={(value) => setValue(data.id, value)}
     />
   );

diff --git a/src/components/generic/InputField/InputField.jsx b/src/components/generic/InputField/InputField.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import webexComponentClasses from '../../helpers';
@@ -22,6 +22,7 @@ import Label from '../../inputs/Label/Label';
  * @param {number} [props.maxLength]  Maximum number of characters allowed
  * @param {number} [props.min]  Minimum value for the input element
  * @param {string} [props.name]  Input name
+ * @param {Function} [props.onBrowserControlRef]  Action to perform to take the input ref
  * @param {Function} [props.onChange]  Action to perform on input change
  * @param {string} [props.pattern]  Specifies a regular expression that the element's value is checked against
  * @param {string} [props.placeholder]  Input placeholder
@@ -47,6 +48,7 @@ export default function InputField({
   min,
   name,
   onChange,
+  onBrowserControlRef,
   pattern,
   placeholder,
   required,
@@ -63,7 +65,9 @@ export default function InputField({
     'has-right-controls': rightControls,
   });
   const inputRef = useRef();
-  const handleChange = (event) => onChange(event.target.value);
+  const handleChange = (event) => {
+    onChange(event.target.value, event.target);
+  };
   const id = domId || uniqueId();
 
   const onKeyDown = (event) => {
@@ -76,6 +80,10 @@ export default function InputField({
 
   useAutoFocus(inputRef, autoFocus);
 
+  useEffect(() => {
+    onBrowserControlRef(inputRef.current);
+  }, [inputRef, onBrowserControlRef]);
+
   return (
     <Label
       className={cssClasses}
@@ -139,6 +147,7 @@ InputField.propTypes = {
   min: PropTypes.number,
   name: PropTypes.string,
   onChange: PropTypes.func,
+  onBrowserControlRef: PropTypes.func,
   pattern: PropTypes.string,
   placeholder: PropTypes.string,
   required: PropTypes.bool,
@@ -169,6 +178,7 @@ InputField.defaultProps = {
   min: undefined,
   name: undefined,
   onChange: undefined,
+  onBrowserControlRef: () => {},
   pattern: undefined,
   placeholder: undefined,
   required: false,

diff --git a/src/components/inputs/DateInput/DateInput.jsx b/src/components/inputs/DateInput/DateInput.jsx
@@ -15,6 +15,7 @@ import {InputField} from '../../generic';
  * @param {boolean} [props.required=false]  Flag indicating input required
  * @param {string} [props.error]  Error text
  * @param {string} [props.label]  Label text
+ * @param {Function} [props.onBrowserControlRef]  Action to perform to take the input ref
  * @param {Function} props.onChange  Action to perform on input change
  * @returns {object} JSX of the component
  */
@@ -27,6 +28,7 @@ export default function DateInput({
   required,
   error,
   label,
+  onBrowserControlRef,
   onChange,
 }) {
   const [cssClasses] = webexComponentClasses('date-input', className);
@@ -41,6 +43,7 @@ export default function DateInput({
       required={required}
       error={error}
       onChange={onChange}
+      onBrowserControlRef={onBrowserControlRef}
       value={value}
       label={label}
     />
@@ -56,6 +59,7 @@ DateInput.propTypes = {
   required: PropTypes.bool,
   error: PropTypes.string,
   label: PropTypes.string,
+  onBrowserControlRef: PropTypes.func,
   onChange: PropTypes.func.isRequired,
 };
 
@@ -68,4 +72,5 @@ DateInput.defaultProps = {
   required: false,
   error: undefined,
   label: undefined,
+  onBrowserControlRef: undefined,
 };
diff --git a/src/components/inputs/NumberInput/NumberInput.jsx b/src/components/inputs/NumberInput/NumberInput.jsx
@@ -24,6 +24,7 @@ const HINTS = {
  * @param {number} [props.max]  Maximum value for the input element
  * @param {number} [props.min]  Minimum value for the input element
  * @param {string} [props.name]  Input name
+ * @param {Function} [props.onBrowserControlRef]  Action to perform to take the input ref
  * @param {Function} props.onChange  Action to perform on input change
  * @param {string} [props.placeholder]  Input placeholder
  * @param {boolean} [props.required=false]  Flag indicating input required
@@ -41,6 +42,7 @@ export default function NumberInput({
   max,
   min,
   name,
+  onBrowserControlRef,
   onChange,
   placeholder,
   required,
@@ -92,6 +94,7 @@ export default function NumberInput({
       min={min}
       max={max}
       name={name}
+      onBrowserControlRef={onBrowserControlRef}
       onChange={onChange}
       placeholder={placeholder}
       required={required}
@@ -114,6 +117,7 @@ NumberInput.propTypes = {
   max: PropTypes.number,
   min: PropTypes.number,
   name: PropTypes.string,
+  onBrowserControlRef: PropTypes.func,
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
   required: PropTypes.bool,
@@ -134,6 +138,7 @@ NumberInput.defaultProps = {
   max: undefined,
   min: undefined,
   name: undefined,
+  onBrowserControlRef: undefined,
   placeholder: undefined,
   required: false,
   style: undefined,

diff --git a/src/components/inputs/PasswordInput/PasswordInput.jsx b/src/components/inputs/PasswordInput/PasswordInput.jsx
@@ -19,6 +19,7 @@ const HINTS = {
  * @param {string} [props.label]  Label text
  * @param {number} [props.maxLength]  Maximum number of characters allowed
  * @param {string} [props.name]  Input name
+ * @param {Function} [props.onBrowserControlRef]  Action to perform to take the input ref
  * @param {Function} props.onChange  Action to perform on input change
  * @param {string} [props.pattern]  Specifies a regular expression that the element's value is checked against
  * @param {string} [props.placeholder]  Input placeholder
@@ -36,6 +37,7 @@ export default function PasswordInput({
   label,
   maxLength,
   name,
+  onBrowserControlRef,
   onChange,
   pattern,
   placeholder,
@@ -71,6 +73,7 @@ export default function PasswordInput({
       label={label}
       maxLength={maxLength}
       name={name}
+      onBrowserControlRef={onBrowserControlRef}
       onChange={onChange}
       pattern={pattern}
       placeholder={placeholder}
@@ -92,6 +95,7 @@ PasswordInput.propTypes = {
   label: PropTypes.string,
   maxLength: PropTypes.number,
   name: PropTypes.string,
+  onBrowserControlRef: PropTypes.func,
   onChange: PropTypes.func.isRequired,
   pattern: PropTypes.string,
   placeholder: PropTypes.string,
@@ -109,6 +113,7 @@ PasswordInput.defaultProps = {
   label: undefined,
   maxLength: undefined,
   name: undefined,
+  onBrowserControlRef: undefined,
   pattern: undefined,
   placeholder: undefined,
   required: false,