diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 6174d3c089..f29a344ff5 100644 --- a/components/lib/datatable/TableBody.js +++ b/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)) { diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js index 9e0d8e3804..c1e0dfdb04 100644 --- a/components/lib/inputotp/InputOtp.js +++ b/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 []; @@ -219,8 +225,9 @@ export const InputOtp = React.memo( }, ptm('root') ); + const inputs = createInputElements(props.length); - return
{createInputElements(props.length)}
; + return
{inputs}
; }) );