Fix #6592: InputOtp respect props.value change (#6595)

Author: melloware

components/lib/datatable/BodyCell.js

@@ -628,15 +628,15 @@ export const BodyCell = React.memo((props) => {
             );
         } else if (rowReorder) {
             const showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true;
-            
-            const customIcon = getColumnProp('rowReorderIcon')
+
+            const customIcon = getColumnProp('rowReorderIcon');
             const rowReorderIconProps = mergeProps(
                 {
                     className: cx('rowReorderIcon')
                 },
-                customIcon ? null : getColumnPTOptions('rowReorderIcon') 
+                customIcon ? null : getColumnPTOptions('rowReorderIcon')
             );
-            
+
             const rowReorderIcon = customIcon || <BarsIcon {...rowReorderIconProps} />;
 
             content = showReorder ? IconUtils.getJSXIcon(rowReorderIcon, { ...rowReorderIconProps }, { props }) : null;

components/lib/datatable/TableBody.js

@@ -607,10 +607,10 @@ export const TableBody = React.memo(
             const { originalEvent: event } = e;
 
             if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
-                event.currentTarget?.draggable = true;
-                event.target?.draggable = false;
+                event.currentTarget.draggable = true;
+                event.target.draggable = false;
             } else {
-                event.currentTarget?.draggable = false;
+                event.currentTarget.draggable = false;
             }
 
             if (allowRowDrag(e)) {

components/lib/inputotp/InputOtp.js

@@ -1,7 +1,7 @@
 import React, { useContext, useRef, useState } from 'react';
 import { PrimeReactContext, ariaLabel } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMergeProps } from '../hooks/Hooks';
+import { useMergeProps, useUpdateEffect } from '../hooks/Hooks';
 import { InputText } from '../inputtext/InputText';
 import { ObjectUtils } from '../utils/Utils';
 import { InputOtpBase } from './BaseInputOtp';
@@ -174,6 +174,12 @@ export const InputOtp = React.memo(
             }
         };
 
+        useUpdateEffect(() => {
+            const value = props.value ? props.value?.toString()?.split?.('') : new Array(props.length);
+
+            setTokens(value);
+        }, [props.value]);
+
         const createInputElements = (remainingInputs) => {
             if (remainingInputs <= 0) {
                 return [];