@verifiedinc-public/shared-ui-elements 0.14.2 → 0.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "keywords": [],

package/src/components/Snackbar/index.tsx

@@ -94,7 +94,23 @@ export const CustomAlertComponent = forwardRef<
   CustomAlertComponentProps
 >(
   (
-    { id, message, severity, alertAction, sx, showCloseIcon = true, ...props },
+    {
+      id,
+      message,
+      severity,
+      alertAction,
+      sx,
+      showCloseIcon = true,
+
+      // remove these props because they were triggering warnings. They are not used in this component anyway
+      persist,
+      hideIconVariant,
+      autoHideDuration,
+      anchorOrigin,
+      iconVariant,
+
+      ...props
+    },
     ref,
   ) => {
     return (

package/src/components/form/OTPInput.tsx

@@ -20,6 +20,7 @@ import {
   type InputBaseProps,
   Typography,
   useTheme,
+  FormControl,
 } from '@mui/material';
 import { v4 as uuid } from 'uuid';
 
@@ -192,22 +193,24 @@ function OTPInputComponent(
     (startIndex: number) => {
       return new Array(3).fill(undefined).map((_, index) => {
         return (
-          <InputBase
-            key={ids.current[index + startIndex]}
-            inputRef={(input) =>
-              ((inputsRef.current[index + startIndex] as any) = input)
-            }
-            autoComplete='one-time-code'
-            autoFocus={index + startIndex === 0}
-            value={values[index + startIndex] || ''}
-            disabled={props.disabled}
-            onChange={handleChange}
-            onKeyUp={handleKeyUp}
-            onFocus={handleFocus}
-            onBlur={() => setIsFocused(false)}
-            {...inputProps}
-            data-testid={`otp-input-${index + startIndex}`}
-          />
+          // FormControl is required for InputBase to avoid bad setState in handleBlur event, and it is one per input.
+          <FormControl key={ids.current[index + startIndex]}>
+            <InputBase
+              inputRef={(input) =>
+                ((inputsRef.current[index + startIndex] as any) = input)
+              }
+              autoComplete='one-time-code'
+              autoFocus={index + startIndex === 0}
+              value={values[index + startIndex] || ''}
+              disabled={props.disabled}
+              onChange={handleChange}
+              onKeyUp={handleKeyUp}
+              onFocus={handleFocus}
+              onBlur={() => setIsFocused(false)}
+              {...inputProps}
+              data-testid={`otp-input-${index + startIndex}`}
+            />
+          </FormControl>
         );
       });
     },